<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
.tab_list ul li.current{
background-color: #81623;
color: red;
}
.tab_con .item{
display: none;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍1</li>
<li>商品介绍2</li>
<li>商品介绍3</li>
<li>商品介绍4</li>
<li>商品介绍5</li>
<li>商品介绍6</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品1
</div>
<div class="item">
商品2
</div>
<div class="item">
商品3
</div>
<div class="item">
商品4
</div>
<div class="item">
商品5
</div>
<div class="item">
商品6
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".tab_list li").click(function(){
//1.点击上部的li,当前的li,添加current类，其余兄弟移除类
$(this).addClass("current").siblings().removeClass("current");
//2.点击的同时，得到当前li的索引号
var index =$(this).index();
//3。让下部里面相应索引号的item显示，其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
})
})
</script>
</body>
</html>
浙公网安备 33010602011771号