JQuery-使用JQ写选项卡功能
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery-选项卡</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 12px auto;
}
ul {
list-style-type: none;
}
.tab-nav {
width: 306px;
margin-top: 20px;
/* border: 1px dotted black; */
overflow: hidden;
}
.tab-nav ul li {
width: 100px;
text-align: center;
float: left;
/* margin-right:12px; */
}
.tab-nav ul li:hover {
/* 鼠标移入样式 */
cursor: pointer;
}
.tab-nav .active {
background-color: black;
color: white;
}
.tab-content {
width: 304px;
}
.tab-content .content {
padding: 6px;
line-height: 1.6rem;
border: 1px dotted black;
display: none;
}
.tab-content .active {
display: block;
}
</style>
</head>
<body>
<div class="box">
<!-- 选项卡标签导航 -->
<!-- 使用自定义属性data-把标签导航和对应的内容区进行关联 -->
<div class="tab-nav">
<ul>
<li data-index="1" class="active">HTML</li>
<li data-index="2">CSS</li>
<li data-index="3">JavaScript</li>
</ul>
</div>
<!-- 选项卡标签导航对应的内容区 -->
<div class="tab-content">
<div class="content active" data-index="1">
<ul>
<li>前端语言</li>
<li>HTML</li>
<li>是一个超文本标记语言</li>
</ul>
</div>
<div class="content" data-index="2">
<ul>
<li>前端语言</li>
<li>CSS</li>
<li>是用来美化网页的</li>
</ul>
</div>
<div class="content" data-index="3">
<ul>
<li>JavaScript</li>
<li>真的很好玩</li>
<li>弱类型脚本语言</li>
</ul>
</div>
</div>
</div>
<script src="jquery/jquery-3.4.1.js"></script>
<script>
$(function() {
// 获取tab导航下第一个子元素节点UL下所有的子元素节点
var tabList = $('.tab-nav ul').children();
// 把导航标签转为数组
// var tabArr = $('.tab-nav ul').children().toArray();
// 把内容区转为数组
var conArr = $('.content').toArray();
// 给tab导航添加点击事件代理
$('.tab-nav').on('click', tabclick);
function tabclick(event) {
// 当点击了一个导航标签后，其他标签的高亮样式全部取消
tabList.each(function(index,tab) {
$(tab).removeClass('active')
});
// 给当前点击的标签添加active高亮样式
$(event.target).addClass('active');
// 清除内容详情区样式，并根据内容区data-index和导航data-index的对应关系，显示对应的内容页面
$.each(conArr,function(index,conlist) {
$(conlist).removeClass('active')
});
$.each(conArr,function(index,conlist) {
// 给当前点击的导航对应的内容区添加active 默认显示样式
if ($(event.target).data('index') === $(conlist).data('index')) {
// console.log($(conlist).data('index'));
$(conlist).addClass('active');
}
});
}
$('.tab-nav').on('mouseover', tabclick);
});
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
