基于jquery的tab切换

最新推荐文章于 2019-11-25 11:06:12 发布

曲小强

最新推荐文章于 2019-11-25 11:06:12 发布

阅读量198

点赞数

CC 4.0 BY-SA版权

分类专栏： JQurey

本文链接：https://blog.csdn.net/quhongqiang/article/details/79623304

JQurey 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用HTML, CSS及JavaScript实现一个简单的选项卡切换效果。通过定义不同的CSS样式并结合jQuery来控制各个内容块的显示与隐藏，从而达到平滑的选项卡切换体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

body { cursor:default; -webkit-text-size-adjust:none; font-size:12px; font-family:Arial; background:#FFF; }
.clear { zoom:1; }
.clear:after { visibility:hidden; display:block; font-size:0; content:"1"; clear:both; height:0; }
.main { width:500px; margin:20px auto; }
.btn span { width:35px; text-align:center; color:#fff; background:#f00; cursor:pointer; margin:0 5px; display:block; float:left; }
.con { display:none; border:#033 1px solid; height:100px; width:200px; overflow: auto;}

<div class="main">
    <div class="btn clear">
        <span>1</span>
	<span>2</span>
	<span>3</span>
    </div>
    <div class="con">
    第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个<br />第一个
 </div>
<div class="con">第二个<br /> </div>
		 <div class="con">第三个<br /> </div>
		</div>

js:
`<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript">$(".con").eq(0).show(); $(".btn span").click(function() { var num = $(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) </script>`

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">$(".con").eq(0).show();
		$(".btn span").click(function() {
		  var num = $(".btn span").index(this);
		  $(".con").hide();
		  $(".con").eq(num).show().slblings().hide();
		})
	</script>