css,js写的简易的tab导航
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css,js写的简易的tab导航相关的知识，希望对你有一定的参考价值。
简易tab导航
作为前端新手，看着别人写的tab导航代码，自己想模仿却总是忘记。于是这次自己利用css，js写了简易的tab导航，话不多说，上代码，首先是html和css部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡切换</title> <style type="text/css"> * { padding: 0; margin: 0; } .tabs { margin: 15% 15%; width: 300px; height: 300px; border: 2px solid #eee; } .tab-head { list-style: none; width: 100%; height: 30px; border-bottom: 2px solid #eee; } .tab-contain .content { text-align: center; width: 300px; height: 268px; } li { float: left; text-align: center; line-height: 30px; width: 99px; height: 30px; background: #aaa; cursor: pointer; } li:nth-child(1) { margin-left: 0px; border-right: 1.5px solid #fff; background: #fff } li:nth-child(3) { border-left: 1.5px solid #fff; } </style> </head> <body> <div class="tabs"> <ul class="tab-head"> <li>足球</li> <li>篮球</li> <li>乒乓球</li> </ul> <div class="tab-contain"> <div class="football content">C罗，梅西，伊布，阿扎尔，齐达内</div> <div class="basketball content" hidden>詹姆斯，科比，乔丹，韦德，保罗，德隆</div> <div class="pingpang content" hidden>蔡振华，孔令辉，刘国梁，郭跃</div> </div> </div> </body>
关于tab导航，个人认为比较重要的就是代码结构了。整个tab由标题栏和主要内容组成，因此在class为"tabs”的div内，由标题列表ul和整个主体内容class为“tab-contain”的div构成。
（1）需要注意的是li元素要设置成左浮动float:left;给所有的li元素添加背景颜色，但是第一个li元素要设置不同的背景色用来区分。
（2）主体内容除了第一个div显示外，其他的都隐藏。
（3）关于nth-child（n）选择符是指父元素下的第几个子元素，具体的意思可以百度或者谷歌。
OK，看完html和css部分，下面看js部分，这里我引用了jquery
(function() {
var $lists = $(‘.tab-head li‘);
$lists.each(function() {
$(this).on(‘mouseover‘,function() {
$(this).css(‘background‘,‘#fff‘).siblings().css(‘background‘,‘#aaa‘);
var index = $(this).index();
$(‘.content‘).eq(index).attr(‘hidden‘,false).siblings().attr(‘hidden‘,true);
})
})
})()
以上代码要说的是以下几点：
（1）（function(){}）() 是匿名函数自执行的方式；
（2）$.each方法遍历了$lists里面的所有数组项，每个li元素都绑定了“mouseover”事件。
（3）$（selector）.index()若不带参数，返回的是该对象在同级元素中的索引
（4）$（selector）.eq(index)返回的是selector中第几个jquery对象，这个方法和$(selector).get(index)类似，不过$(selector).get(index)返回的是DOM元素。
感觉以上代码值得说的地方就这些了。主要是给自己加深对tab的印象和理解。
以上是关于css,js写的简易的tab导航的主要内容，如果未能解决你的问题，请参考以下文章
DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例