如图所示,鼠标经过时,弹出子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);
}
);
})