jquery怎么实现tab切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.8.3.min.js"></script>
<style type="text/css">
.box{
width: 80%;
height: 300px;
border: solid 1px #eeeeee;
margin: 0 auto;
}
.box .tab_header ul{
margin: 0;
padding: 0;
width: 100%;
height: 50px;
display: flex;
line-height: 50px;
justify-content: space-between;
border-bottom: solid 1px #eeeeee;
}
.box .tab_header ul li{
width: 33%;
border-right: solid 1px #eeeeee;
list-style: none;
text-align: center;
}
.current{
background-color: #eeeeee;
color: #08BECE;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="box">
<!--这个是tab切换标题-->
<div class="tab_header">
<ul>
<li class="current">tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<!--这个是要显示的内容部分-->
<div class="tab_content">
<div>tab1的内容</div>
<div class="hide">tab2的内容</div>
<div class="hide">tab3的内容</div>
</div>
</div>
</div>
<script type="text/javascript">
var $asd=$(".tab_header ul li");
$asd.click(function(){
$(this).addClass("current").siblings().removeClass("current");
var $index=$asd.index(this);
var $content=$(".tab_content div");
$content.eq($index).show().siblings().hide();
});
</script>
</body>
</html>
这个是效果图
<html>
<head>
<title>Tab Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{ margin: 0; padding: 0;}
.container{ width: 1000px; height: auto; margin: 0 auto; border: 1px solid #4e4e4e;}
.tab-head{ width: 100%; height: 50px;border-bottom: 1px solid #4e4e4e; }
.tab-head ul{ width: 100%; height: 50px; list-style: none;}
.tab-head ul .normal-li{ width: 150px; height: 50px; float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #fff; color: #111; cursor: pointer;}
.tab-head ul .selected-li{ width: 150px; height: 50px; float: left; line-height: 50px; text-align: center; font-family: "Microsoft YaHei"; font-weight: bold; font-size: 20px; background-color: #111; color: #fff;}
.tab-content{ width: 100%; height: auto;}
.tab-content ul{ width:100%; height: auto; list-style: none;}
.tab-content ul li{ width:100%; height: 500px; display:none; }
</style>
//jquery库换成你自己的
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
var currentIndex=0;
$(document).ready(function(){
$(".tab-head ul li").click(function(){
var index=$(this).index();
if(currentIndex!=index) {
currentIndex=index;
$(this).removeClass("normal-li").addClass("selected-li");
$(this).siblings().removeClass("selected-li").addClass("normal-li");
var contents=$(".tab-content").find("li");
$(contents[index]).show();
$(contents[index]).siblings().hide();
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="tab-head">
<ul>
<li class="selected-li">导航</li>
<li class="normal-li">推荐</li>
<li class="normal-li">购物</li>
<li class="normal-li">视频</li>
</ul>
</div>
<div class="tab-content">
<ul>
<li style="background-color: antiquewhite; display: block;">导航</li>
<li style="background-color:antiquewhite ;">推荐</li>
<li style="background-color:antiquewhite ;">购物</li>
<li style="background-color:antiquewhite ;">视频</li>
</ul>
</div>
</div>
</body>
</html>
2018-07-30 · 百度知道合伙人官方认证企业
育知同创教育
在把样式加上，
再然后引入jQuery文件，准备写jQuery实现tab切换效果。
主要jQuery代码如下，就是当点击某个li标签时，这个标签添加选中的样式，然后对应的内容显示出来，隐藏其他内容。
6
动态演示tab效果。
