<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>tab切换</title>
<meta charset="UTF-8">
<script src="jquery-3.4.1.js"></script>
<style>
*{
margin:0;
padding: 0;
}
.tab_outer{
margin:0 auto;
60%;
}
.menu{
background-color: #cccccc;
line-height: 40px;
}
.menu li{
display: inline-block;
}
.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="tab_outer">
<ul class="menu">
<li xxx="c1" class="current" onclick="tab(this)">菜单一</li>
<li xxx="c2" onclick="tab(this)">菜单二</li>
<li xxx="c3" onclick="tab(this)">菜单三</li>
</ul>
<div class="content">
<div id="c1">内容一</div>
<div id="c2" class="hide">内容二</div>
<div id="c3" class="hide">内容三</div>
</div>
</div>
<script>
function tab(self) {
// $(self).addClass('current');
// $(self).siblings().removeClass('current');
$(self).addClass('current').siblings().removeClass('current');//代替以上两句功能
var s=$(self).attr('xxx');
$('#'+s).removeClass('hide').siblings().addClass('hide');
}
</script>
</body>
</html>
