码迷,mamicode.com
首页 > Web开发 > 详细

Jquery Tab切换

时间:2019-11-01 18:16:21      阅读:83      评论:0      收藏:0      [点我收藏+]

标签:set   display   ecc   ebe   func   red   gre   query   current   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<script src="jquery-3.1.1.js"></script>
<script>

</script>
<style>
*{
margin: 0px;
padding: 0px;
}
.tab_outer{
margin: 0px auto;
width: 60%;
}
.menu{
background-color: #cccccc;
/*border: 1px solid red;*/
line-height: 40px;
}
.menu li{
display: inline-block;
}
.menu a{
border-right: 1px solid red;
padding: 11px;
}
.content{
background-color: tan;
border: 1px solid green;
height: 300px;
}
.hide{
display: none;
}

.current{
background-color: darkgray;
color: yellow;
border-top: solid 2px rebeccapurple;
}
</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");

// alert($(self).attr("xxx"))
var s=$(self).attr("xxx");
$("#"+s).removeClass("hide").siblings().addClass("hide");

}
</script>
</body>
</html>

Jquery Tab切换

标签:set   display   ecc   ebe   func   red   gre   query   current   

原文地址:https://www.cnblogs.com/gerenboke/p/11778433.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!