色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

網(wǎng)頁tab切換css

CSS
方一強2年前9瀏覽0評論
今天我們來談?wù)劸W(wǎng)頁中常見的一個功能——tab切換，也就是選項卡切換。在一個頁面上我們經(jīng)常遇到需要展示多個內(nèi)容模塊，但是又不能全部展示出來，于是我們需要選項卡切換來方便的切換展示內(nèi)容。接下來我們就來學(xué)習(xí)一下如何通過CSS實現(xiàn)網(wǎng)頁中的tab切換效果。 首先，在HTML中我們需要一個外層盒子和多個選項卡按鈕和對應(yīng)的內(nèi)容區(qū)塊，比如：
<div class="tab-container">
<ul class="tab-nav">
<li>選項卡1</li>
<li>選項卡2</li>
</ul>
<div class="tab-content">
<div>內(nèi)容1</div>
<div>內(nèi)容2</div>
</div>
</div>
其次，我們需要定義CSS樣式來控制選項卡按鈕和內(nèi)容區(qū)塊的顯示和隱藏，使用CSS選擇器來實現(xiàn)。如下：
.tab-nav li {
display: inline-block;
padding: 8px 12px;
cursor: pointer;
background-color: #EEE;
}
.tab-nav li.active {
background-color: #FFF;
}
.tab-content div {
display: none;
}
.tab-content div.active {
display: block;
}
然后，我們需要使用JavaScript來實現(xiàn)選項卡按鈕的點擊事件和內(nèi)容區(qū)塊的顯示和隱藏。如下：
var tabs = document.querySelectorAll('.tab-nav li');
var contents = document.querySelectorAll('.tab-content div');
tabs.forEach(function(tab, index) {
tab.addEventListener('click', function() {
tabs.forEach(function(item) {
item.classList.remove('active');
});
this.classList.add('active');
contents.forEach(function(content) {
content.classList.remove('active');
});
contents[index].classList.add('active');
});
});
最后，在網(wǎng)頁中顯示調(diào)用剛剛定義好的HTML和CSS和JavaScript代碼，即可實現(xiàn)tab切換的效果。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab切換效果</title>
<style>
/* ...CSS代碼... */
</style>
</head>
<body>
<div class="tab-container">
<ul class="tab-nav">
<li>選項卡1</li>
<li>選項卡2</li>
</ul>
<div class="tab-content">
<div>內(nèi)容1</div>
<div>內(nèi)容2</div>
</div>
</div>
<script>
// ...JavaScript代碼...
</script>
</body>
</html>
至此，我們就通過HTML、CSS和JavaScript實現(xiàn)了一個簡單的tab切換效果。