<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font: 12px/19px Arial, Helvetica, sans-serif;
color: #666;
}
.tab {
width: 240px;
margin: 50px;
}
.tab_menu {
clear: both;
}
.tab_menu li {
float: left;
text-align: center;
cursor: pointer;
list-style: none;
padding: 1px 6px;
margin-right: 4px;
background: #f1f1f1;
border: 1px solid #898989;
border-bottom: none;
}
.tab_menu li.hover {
background: #dfdfdf;
}
.tab_menu li.selected {
color: #fff;
background: #6d84b4;
}
.tab_box {
clear: both;
border: 1px solid #898989;
height: 100px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">春天</li>
<li>夏天</li>
<li>秋天</li>
<li>冬天</li>
</ul>
</div>
<div class="tab_box">
<div>春天</div>
<div class="hide">夏天</div>
<div class="hide">秋天</div>
<div class="hide">冬天</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var $div_li = $(‘div.tab_menu ul li‘);
$div_li
.click(function () {
$(this)
.addClass(‘selected‘) //当前<li>元素高亮
.siblings()
.removeClass(‘selected‘); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$(‘div.tab_box > div‘) //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index)
.show() //显示 <li>元素对应的<div>元素
.siblings()
.hide(); //隐藏其它几个同辈的<div>元素
})
.hover(
function () {
//添加光标滑动效果
$(this).addClass(‘hover‘);
},
function () {
$(this).removeClass(‘hover‘);
}
);
});
</script>
</body>
</html>
网页选项卡也可以叫 tab 栏切换，就是通过点击不同的按钮，显示不同的内容，原理很简单，通过隐藏和显示来切换不同的内容。