一、案例描述
在浏览器中显示一个选项卡界面,头部为1、2、3、4、5。点击头部任意一个数字,都在下方显示出不同的信息,并且鼠标停留在任意一个数字上时,数字的颜色改变。案例如下图所示
- 默认的是数字1中的内容
- 点击数字二
- 点击其他数字效果相同,在这里就不一一展示了
二、HTML代码
1、全部HTML代码展示
<div id="table">
<!-- 头部 -->
<div id="header">
<ul>
<li class="selected">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ul>
</div>
<!-- 内容 -->
<div id="content">
<div class="dom show" >
<ul>
<li> <a href="#">我是第一个选项卡的内容1</a></li>
<li> <a href="#">我是第一个选项卡的内容2</a></li>
<li> <a href="#">我是第一个选项卡的内容3</a></li>
<li> <a href="#">我是第一个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第二个选项卡的内容1</a></li>
<li> <a href="#">我是第二个选项卡的内容2</a></li>
<li> <a href="#">我是第二个选项卡的内容3</a></li>
<li> <a href="#">我是第二个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第三个选项卡的内容1</a></li>
<li> <a href="#">我是第三个选项卡的内容2</a></li>
<li> <a href="#">我是第三个选项卡的内容3</a></li>
<li> <a href="#">我是第三个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第四个选项卡的内容1</a></li>
<li> <a href="#">我是第四个选项卡的内容2</a></li>
<li> <a href="#">我是第四个选项卡的内容3</a></li>
<li> <a href="#">我是第四个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第五个选项卡的内容1</a></li>
<li> <a href="#">我是第五个选项卡的内容2</a></li>
<li> <a href="#">我是第五个选项卡的内容3</a></li>
<li> <a href="#">我是第五个选项卡的内容4</a></li>
</ul>
</div>
</div>
</div>
</body>
2、HTML代码分解 ----头部
头部由一个包含了5个 li标签 的列表构成,每个 li标签 中都包含一个 a标签
这里的selected选择器的作用是 改变选中的 li标签 的背景颜色
<div id="header">
<ul>
<li class="selected">
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#">4</a>
</li>
<li>
<a href="#">5</a>
</li>
</ul>
</div>
3、HTML代码分解 ----内容
(1)在这里每一个含有dom选择器的 div 依次代表的是每一个选项卡的内容
(2).dom选择器中设置display:none;使每一个选项卡内容隐藏。而对展现的内容另外加一个 style="display: block" 的属性,使其展现在浏览器上
<div id="content">
<div class="dom show" >
<ul>
<li> <a href="#">我是第一个选项卡的内容1</a></li>
<li> <a href="#">我是第一个选项卡的内容2</a></li>
<li> <a href="#">我是第一个选项卡的内容3</a></li>
<li> <a href="#">我是第一个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第二个选项卡的内容1</a></li>
<li> <a href="#">我是第二个选项卡的内容2</a></li>
<li> <a href="#">我是第二个选项卡的内容3</a></li>
<li> <a href="#">我是第二个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第三个选项卡的内容1</a></li>
<li> <a href="#">我是第三个选项卡的内容2</a></li>
<li> <a href="#">我是第三个选项卡的内容3</a></li>
<li> <a href="#">我是第三个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第四个选项卡的内容1</a></li>
<li> <a href="#">我是第四个选项卡的内容2</a></li>
<li> <a href="#">我是第四个选项卡的内容3</a></li>
<li> <a href="#">我是第四个选项卡的内容4</a></li>
</ul>
</div>
<div class="dom">
<ul>
<li> <a href="#">我是第五个选项卡的内容1</a></li>
<li> <a href="#">我是第五个选项卡的内容2</a></li>
<li> <a href="#">我是第五个选项卡的内容3</a></li>
<li> <a href="#">我是第五个选项卡的内容4</a></li>
</ul>
</div>
</div>
三、CSS样式
css代码就不做详细的说明了
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
a {
display: inline-block;
color: black;
float: left;
text-align: center;
}
#table {
width: 500px;
height: 170px;
margin: 0 auto;
margin-top: 50px;
border: 1px solid #e0e0e0;
}
/* 头部样式 */
#table #header {
width: 100%;
height: 50px;
}
#table #header a {
width: 20%;
line-height: 50px;
background-color: #e0e0e0;
}
#table #header a:hover {
color: red;
}
#table #header .selected a{
background-color:whitesmoke;
}
/* 内容样式 */
#table #content {
width: 100%;
height: 120px;
}
#table #content .dom {
margin-top: 10px;
display: none;
}
#table #content .dom a{
width: 50%;
padding: 10px 0;
}
#table #content .show {
display: block;
}
四、jQuery核心代码
这里有几点是需要大噶注意的!!!
(1)在改变点击的 li标签 的样式之前必须先将所有选项卡都恢复到未点击的样式
(2)这里用到了 index()方法 来找到找到点击的 li标签 所对应的内容
(3)在展示所点击选项的内容之前要先将所有选项卡内容都隐藏
请大家理解注释部分!
<script src="../jquery.js"></script>
<script>
$(function() {
//监听选项卡的点击事件
$("#header>ul>li").click(function() {
//先将所有选项卡都恢复到未点击的样式
$("#header>ul>li").removeClass("selected");
//改变点击的li标签的样式
$(this).addClass("selected");
//获取当前点击li标签的索引
var $index = $(this).index();
//根据索引找到对应的内容
var $content = $("#content>div").eq($index)
//先将所有选项卡内容都隐藏
$("#content>div").removeClass("show");
//展示所点击选项的内容
$content.addClass("show");
});
});
</script>
五、文末分享
这篇案例的姊妹篇:用原生JS实现选项卡
温馨提示:本案例HTML代码和CSS样式稍作修改,即增加了一个类选择器 show,其余部分HTML代码和CSS样式内容相同
原创不易,点个赞叭