jQuery实现table切换
2018-06-21 本文已影响19人
椰果粒
思路：初始化时将第一个li默认为选中样式，第一个content显示，其余的display为none；点击每个li时，将这个li设置为选中，其余兄弟去掉选中的样式，content中也做响应的变化
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,
div,
ul,
ol,
li,
p {
margin: 0px;
padding: 0px;
}
ul {
list-style: none;
}
ul li {
float: left;
width: 100px;
height: 45px;
line-height: 45px;
background: #ddd;
text-align: center;
}
ul li a {
text-decoration: none;
}
.container {
border: 1px solid #abcdef;
width: 299px;
height: 200px;
}
.active {
background: gold;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function() {
$("ul li").each(function() {
var index = $(this).index();
// 初始化
$("ul li").eq(0).addClass("active");
$(this).click(function() {
// 点击某个元素时，给这个元素添加active类，其余兄弟元素的active类都取消
$(this).addClass("active").siblings().removeClass("active");
$(".container>div").eq(index).stop(true).show().siblings().stop(true).hide();
})
})
})
</script>
</head>
<body>
<ul>
<li><a>水果</a></li>
<li><a>蔬菜</a></li>
<li><a>肉类</a></li>
</ul>
<div class="container">
<div>香蕉，苹果，橘子都是水果</div>
<div style="display:none;">黄瓜，土豆，西蓝花都是蔬菜</div>
<div style="display:none;">羊肉，牛肉，猪肉都是肉类</div>
</div>
</body>
</html>
