今晚，我们来用实现一个简单的选项卡切换代码，主要代码只有两行。
效果：
思路：通过切换JQuery控制div的显隐和样式的改变
其中那个一个div显示，其余全隐藏
实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#content{
width: 200px;
height: 200px;
border:1px solid #ccc;
overflow: hidden;
margin-top: -1px;
}
button{
border:1px solid #ccc;
outline:none;
}
.active{
background: white;
border-bottom: 1px solid white;
}
#content>div{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<button class="active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<div id="content">
<div>标签页11111</div>
<div>标签页2222</div>
<div>标签页3333</div>
</div>
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script>
$("button").click(function(){
// 控制样式的改变 当前按钮添加样式，他的同级兄弟全部去除样式
$(this).addClass(‘active‘).siblings().removeClass(‘active‘);
// 控制div的显隐 当前按钮对应的div显示，他的同级兄弟全部隐藏
$("#content>div").eq($(this).index()).css("display","block").siblings().css("display","none");
})
</script>
简单吧，其实只要思路出来了没什么难的，今天被问这个怎么实现，顺便就写一下。希望能帮到大家
原文地址：https://www.cnblogs.com/suihang/p/11391862.html
时间： 2024-10-10 17:34:21