jquery 简单实用的Tab切换

最新推荐文章于 2024-03-26 16:05:56 发布

chenqunjian

最新推荐文章于 2024-03-26 16:05:56 发布

阅读量587

点赞数 1

分类专栏：业余爱好文章标签： jquery 简单Tab切换

本文链接：https://blog.youkuaiyun.com/chenqunjian/article/details/48303499

版权

业余爱好专栏收录该内容

7 篇文章

订阅专栏

本例由于过于简单我就不注释了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8s" />
<style>
body,ul,li {margin: 0; padding: 0;}
img{border: 0;}
ul,li {list-style: none;}
.text { margin: 0 auto; width: 985px; height: 232px; border: 1px solid red;}
.text ul li{width: 300px; height: 30px; line-height: 30px; float: left; border: 1px solid yellow; text-align: center;}
.text ul li.tab{background: green; cursor: pointer;}
.text .con {margin: 0 auto; overflow: hidden;}
</style>
<script type="text/javascript" src="jquery1.10.2.js"></script>
<script>
$(function(){
$(".text ul li").click(function(){
var _index = $(this).index();
//alert(_index);
$(this).addClass("tab").siblings().removeClass("tab");
$(".text .con").css("display","none");
$(".text .con").eq(_index).css("display","block")
})
})
</script>
</head>
<body>
<div class="text">
<ul>
<li class="tab">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="con" style="width:985px; height:200px;border: 1px solid red; background: red;">
</div>
<div class="con" style="width:985px; height:200px;border: 1px solid red; background: green; display: none">
</div>
<div class="con" style="width:985px; height:200px;border: 1px solid red; background: yellow; display: none ">
</div>
</div>
</body>
</html>