选项卡的实现方式

本文主要介绍选项卡的实现：原生javascript和jQuery以及Bootstrap 附上演示地址：https://haochn.github.io/demo/tab-panel/js.html https://haochn.github.io/demo/tab-panel/jquery.html

html部分：

<div class="tab"> <div class="title"> <ul id="nav"> <li class="selected">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="contains"> <div>111</div> <div class="hide">222</div> <div class="hide">333</div> <div class="hide">444</div> </div> </div>

css部分：

.tab{ margin:0 auto; width:60%; height:300px; padding:0 0; border:1px solid #ccc; } #nav{ height:30px; padding:0; margin:0; font-size: 0; cursor: pointer; } #nav li{ padding:0; margin:0; display: inline-block; width:25%; line-height: 30px; text-align:center; list-style: none; background: #f3f3f3; font-size: 14px; } #nav .selected{ background: #099; } #nav li:hover{ background: #099; } #contains { text-align: center; padding:20px 0; } .hide{ display:none; }

主要实现方式：

原生javacsript实现

源码：

window.onload = function() { var Nav = document.getElementById("nav"); var NavLi = nav.getElementsByTagName('li'); var contains = document.getElementById("contains"); var containsDiv = contains.getElementsByTagName("div"); TabPanel(NavLi, containsDiv); } //设置处理的方法 function TabPanel(NavLi, containsDiv) { for (var i = 0; i < NavLi.length; i++) { NavLi[i].index = i;//指定当前元素的索引 //点击执行相应操作 NavLi[i].onclick = function() { for (var j = 0; j < NavLi.length; j++) { //将li的css类设置为空 NavLi[j].className = ""; //将bu不需要显示内容的css类设置为hide containsDiv[j].className = 'hide'; } //将点击的元素(当前li的css类设置为selectedf) //并将需要显示的内容设置为可显示（将相应的css类设置为空） NavLi[this.index].className = "selected"; containsDiv[this.index].className = ""; } } }

jquery实现（相对于原生js，代码更加简介）

源码：

核心思想： 对每一个li执行遍历，对点击事件执行相应的方法，执行方法为：判断当前li的类是否为“selected‘’，如果不是将当前li的css类设置为”selected”,并将其同级元素（即其他的li）的css类设置为空，否则，将其同级元素css类设置为空。将要显示的内容显示，其他的隐藏。

$(document).ready(function() { $('#nav li').each(function() { $($(this).click(function() { if (!$(this).hasClass('selected')) { $(this).addClass('selected').siblings().removeClass(); } else { $(this).siblings().removeClass(); } var id = $(this).index(); $('#contains').children().eq(id).show().siblings().hide(); })) }); })

知识点：hasClass()查找包含某个类的元素 siblings()查找该元素的所有同胞元素 eq(index) 方法将匹配元素集缩减值指定 index 上的一个

BootStrap实现：

参考我的博客：http://blog.csdn.net/u013076360/article/details/52891626