JQuery實現選項卡
阿新 • • 發佈：2019-01-20
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#ulList{
margin: 0;
padding: 0;
}
#ulList li{
float: left;
width: 98px;
text-align: center;
color: white;
list-style: none;
border: 1px solid #2B88FF;
background-color: #009933;
}
#tabcontent{
width: 300px;
height: 100px;
background-color: lightgoldenrodyellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script>
$(document).ready(function() {
var divarr = $('#tabcontent').children(); //獲取
divarr.css("display", "none");
$("#ulList li").click(function() {
divarr.removeClass("active"); //刪除所有的class
var count = $(this).index(); //獲取li的索引
divarr.eq(count).addClass("active").siblings().css("display", "none"); //給相應的div新增class，並讓兄弟節點隱藏
$('.active').css("display","block"); //顯示隱藏div
})
})
</script>
</head>
<body>
<div>
<div class="header">
<h2>選項卡</h2></div>
<div class="tab">
<ul id="ulList">
<li id="lia">選項卡1</li>
<li id="lib">選項卡2</li>
<li id="lic">選項卡3</li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tabcontent">
<div id="c1" class="active">
<div>選項卡內容1</div>
</div>
<div id="c2">
<div>選項卡內容2</div>
</div>
<div id="c3">
<div>選項卡內容3</div>
</div>
</div>
</div>
</body>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#ulList{
margin: 0;
padding: 0;
}
#ulList li{
float: left;
width: 98px;
text-align: center;
color: white;
list-style: none;
border: 1px solid #2B88FF;
background-color: #009933;
}
#tabcontent{
width: 300px;
height: 100px;
background-color: lightgoldenrodyellow;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.js" ></script>
<script>
$(document).ready(function() {
var divarr = $('#tabcontent').children(); //獲取
divarr.css("display", "none");
$("#ulList li").click(function() {
divarr.removeClass("active"); //刪除所有的class
var count = $(this).index(); //獲取li的索引
divarr.eq(count).addClass("active").siblings().css("display", "none"); //給相應的div新增class，並讓兄弟節點隱藏
$('.active').css("display","block"); //顯示隱藏div
})
})
</script>
</head>
<body>
<div>
<div class="header">
<h2>選項卡</h2></div>
<div class="tab">
<ul id="ulList">
<li id="lia">選項卡1</li>
<li id="lib">選項卡2</li>
<li id="lic">選項卡3</li>
</ul>
</div>
<div style="clear:both;"></div>
<div id="tabcontent">
<div id="c1" class="active">
<div>選項卡內容1</div>
</div>
<div id="c2">
<div>選項卡內容2</div>
</div>
<div id="c3">
<div>選項卡內容3</div>
</div>
</div>
</div>
</body>