网页选项卡可以较好的利用有限的页面来展示更多的元素，而使用JQuery来制作网页选项卡也是一件非常简单的事情。今天就来分享一个网页选项卡的制作小技巧。
◦引入所需库 ◦选项卡原理 ◦业务核心 ◦完整小例子
引入所需库
这个知识点很基础，但是为了照顾fresh man,我还是写一下吧。
选项卡原理
选项卡出现其实只是某一个div获取到了显示的权限，其他的没有显示而已。 •网页代码
•添加点样式元素
// 使得UL中的li<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>水平排列
ul {
display:inline;
white-space: nowrap;
}
li {
margin:3px;
float:left;
background:red;
// 这样可以防止li<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>出现换行的<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>
display:inline-block;
}
.tab_menu {
list-style:none; /* 去掉ul前面的符号 */
margin: 0px; /* 与外界元素的距离为0 */
padding: 0px; /* 与内部元素的距离为0 */
width: auto; /* 宽度根据元素<a href="https://www.jb51.cc/tag/neirong/" target="_blank" class="keywords">内容</a>调整 */
}
.tab_<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> {
background-color: #465c71; /* 背景色 */
border: 1px #4e667d solid; /* 边框 */
color: #dde4ec; /* <a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>颜色 */
display: block; /* 此元素将<a href="https://www.jb51.cc/tag/xianshi/" target="_blank" class="keywords">显示</a>为块级元素，此元素前后会带有换行符 */
line-height: 1.35em; /* 行高 */
padding: 4px 20px; /* 内部填充的距离 */
text-decoration: none; /* <a href="https://www.jb51.cc/tag/buxianshi/" target="_blank" class="keywords">不显示</a>超<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>下划线 */
white-space: nowrap; /* 对于文本内的空白处，不会换行，文本会在在同一行上继续，直到遇到 <br> <a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a>为止。 */
}
.selected {
background-color: green;
display: block;
}
.hide {
display: none;
}•JQuery控制
// 加上鼠标悬浮效果
$(function(){
$("div.tab_menu ul li").hover(function(){
$(this).addClass("selected").show();
// 下面的这个可以实现选项卡的联动效果
var index = $("ul li").index(this);
$("div.tab_Box > div").eq(index).show().siblings().hide();
},function(){
$(this).removeClass("selected").show();
// 下面的这个可以实现选项卡的联动效果
var index = $("ul li").index(this);
$("div.tab_Box > div").eq(index).show().siblings().hide();
})
})
里面最关键的其实还是最为基础的JQuery选择器的使用，然后我们就可以动态的改变页面上的元素，从而实现我们想要的效果。这也是JQuery的强大之处。
这里比较有技巧性的就是通过对ul li样式的变换，实现了类似于导航栏的效果。我们可以借鉴到今后的开发之中。这是一个非常实用的小技巧。
完整小例子
实现的效果如下：
