如图所示，鼠标经过时，弹出子tab，上方横条切换到当前位置上。
一、思路
- tab栏切换：用到排他思想，当鼠标经过时，设置所有的都隐藏，当前的显示；鼠标离开时，所有的都隐藏
- 上方横条：需要获取距离左边的宽度，和当前索引下的宽度
【注意】原生js的引入需要放到最下方，因为需要等整个dom加载完后，才加载js
jquery可以随处写
二、步骤分解
1.获取元素
// 针对navline只需改变offsetleft和width即可
// 1.获取元素
var nav = document.querySelector('#nav');
var lis = document.querySelectorAll('.top-nav-li');
var navLine = document.querySelector('#navline');
var item = document.querySelectorAll('.syj');2.自定义属性值，获得索引
自定义属性
lis[i].setAttribute('index', i);
//获取自定义属性值
//写在鼠标经过 离开事件内
var index = this.getAttribute('index'); //返回指定属性的属性值3.获取元素左边距，用offset方法；赋值给style记得加上px
var reLength = this.offsetLeft
// console.log(leLength);
var rewidth = this.offsetWidth;
navLine.style.width = rewidth + 'px';
navLine.style.left = reLength + 'px';三、具体代码如下
js模块
// tab切换
// 针对navline只需改变offsetleft和width即可
// 1.获取元素
var nav = document.querySelector('#nav');
var lis = document.querySelectorAll('.top-nav-li');
var navLine = document.querySelector('#navline');
var item = document.querySelectorAll('.syj');
// var item = lis.lastElementChild;
// console.log(item);
// 2.鼠标经过显示-循环
for (var i = 0; i < lis.length; i++) {
//设置的内置属性
lis[i].setAttribute('index', i);
// 鼠标经过lis[i]时，他的子ul显示，其他lis的ul隐藏
lis[i].onmouseover = function() {
var reLength = this.offsetLeft
// console.log(leLength);
var rewidth = this.offsetWidth;
// console.log(rewidth);
var index = this.getAttribute('index'); //返回指定属性的属性值
// (1) 我们先把所有的子项隐藏
for (var i = 0; i < item.length; i++) {
item[i].style.display = 'none';
}
// (2) 然后才让当前的显示，
item[index].style.display = 'block';
// offset获取的元素记得加px
navLine.style.width = rewidth + 'px';
navLine.style.left = reLength + 'px';
},
lis[i].onmouseout = function() {
var index = this.getAttribute('index'); //返回指定属性的属性值
item[index].style.display = 'none';
}
};四、用伪数组获取li下的元素，然后对应的设置显示与隐藏，就不用担心子tab对应的问题了
lis[i].onmouseover = function() {
var reLength = this.offsetLeft
// console.log(leLength);
var rewidth = this.offsetWidth;
// console.log(rewidth);
var index = this.getAttribute('index'); //返回指定属性的属性值
// (1) 我们先把所有的子项隐藏
// for (var i = 0; i < item.length; i++) {
// item[i].style.display = 'none';
// }
// (2) 然后才让当前的显示，
if (this.children[1] == undefined) {
} else {
this.children[1].style.display = 'block';
}
// item[index].style.display = 'block';
// offset获取的元素记得加px
navLine.style.width = rewidth + 'px';
navLine.style.left = reLength + 'px';
},
lis[i].onmouseout = function() {
var index = this.getAttribute('index'); //返回指定属性的属性值
if (this.children[1] == undefined) {
} else {
this.children[1].style.display = 'none';
}
// item[index].style.display = 'none';
}五、jquery实现
思路同上，只是元素获取、事件上简单了些；用hover方法实现；链表实现排他
//tab栏切换
$(function() {
// 1. 隐式迭代 给所有的导航都绑定了点击事件
$(".top-nav-li").hover(function() {
// 鼠标经过显示子导航，鼠标离开隐藏，用hover实现
$(this).children("ul").stop().slideDown(200);
//获取index值
// var index = $(this).index();
// console.log(index);
//获取left值，需动态减去top_in的左边距
var Y = $('.top_in').offset().left;
// 获取移动的左边距
var lef = $(this).offset().left - Y;
// 获取移动后的宽度
var wid = $(this).width();
// console.log(lef);
// 法一
$('#navline').stop().animate({
"left": lef,
"width": wid
}, 200);
//法二
// $('#navline').css({
// "left": lef,
// "width": wid
// });
},
function() {
$(this).children("ul").stop().slideUp(200);
}
);
})
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
