js選項卡功能
阿新 • • 發佈：2018-11-19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js選項卡功能</title> <style> .btn { width: 60px; hieght: 30px; } .content { width: 200px; height: 200px; border: 1px solid #b1b3b0; display: none; } .on { background: #2d64b3; color: #fff; } </style> </head> <body> <button class="btn on">導航1</button> <button class="btn">導航2</button> <button class="btn">導航3</button> <div class="content" style="display: block;">內容1</div> <div class="content">內容2</div> <div class="content">內容3</div> </body> <script> var btn = document.getElementsByTagName('button'); var content = document.getElementsByClassName('content'); for (var i = 0; i < btn.length; i++) { (function (n) { btn[i].onclick = function () { for (var j = 0; j < btn.length; j++) { btn[j].className = ""; content[j].style.display = 'none' } this.className = "on"; content[n].style.display = 'block' } }(i)) } </script> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項卡(利用css中target)</title> <style> *{ margin:0; padding: 0; list-style:none ; text-decoration: none; } .tab{ width: 300px; height: 300px; border:1px solid black; } .tab-choose{ width: 100%; box-sizing: border-box; height: 40px; } .tab-choose li{ width: 30%; height: 40px; border: 1px solid #e1e1e1; float: left; text-align: center; line-height: 40px; font-size: 14px; margin-left: 2%; } .tab-con { width: 100%; height: 260px; text-align: center; line-height: 260px; font-size: 16px; } .tab-con ul li{ width: 100%; height: 100%; } .tab-con ul li { display: none; } .tab-con ul li:target { display: block; color: red; } </style> </head> <body> <div class="tab"> <ul class="tab-choose"> <li><a href="#page1">選擇一</a></li> <li><a href="#page2">選擇二</a></li> <li><a href="#page3">選擇三</a></li> </ul> <div class="tab-con"> <ul > <li id="page1">內容一</li> <li id="page2">內容二</li> <li id="page3">內容三</li> </ul> </div> </div> </body> </html>
URL 帶有後面跟有錨名稱 #，指向文件內某個具體的元素。這個被連結的元素就是目標元素(target element)。
:target 選擇器可用於選取當前活動的目標元素。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選項卡(利用input)</title> <style> * { margin: 0; padding: 0; list-style: none; } .tab-choose ul { position: relative; width: 300px; } ul li input { display: none; } ul li label { float: left; width: 100px; text-align: center; line-height: 30px; box-sizing: border-box; border: 1px solid black; border-right: none; cursor: pointer; } ul li input:checked + label { color: #fff; background: #000; } ul li:last-child label { border-right: 1px solid; } ul li .tab-cont { display: none; position: absolute; left: 0; top: 31px; width: 100%; height: 300px; box-sizing: border-box; border: 1px solid #000000; font-size: 16px; text-align: center; line-height: 300px; } ul li input:checked ~ .tab-cont { display: block; } /* + css中向下查詢相鄰兄弟選擇器 ~ 同一父級的同級兄弟選擇器 */ </style> </head> <body> <div class="tab-choose"> <ul> <li> <input id="tab1" type="radio" name="tab" checked> <label for="tab1">選擇一</label> <div class="tab-cont">內容一</div> </li> <li> <input id="tab2" type="radio" name="tab"> <label for="tab2">選擇一</label> <div class="tab-cont">內容二</div> </li> <li> <input id="tab3" type="radio" name="tab"> <label for="tab3">選擇一</label> <div class="tab-cont">內容三</div> </li> </ul> </div> </body> </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hash</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.tab {
width: 300px;
}
.tab-choose {
width: 300px;
height: 40px;
}
.tab-choose li {
float: left;
width: 100px;
line-height: 40px;
box-sizing: border-box;
border: 1px solid #000;
border-right: none;
text-align: center;
}
.tab-choose li:last-child {
border-right: 1px solid #000000;
}
.tabCur {
background: black;
color: #fff;
}
.tab-cont {
width: 298px;
height: 200px;
border: 1px solid #000;
}
.page {
display: none;
}
.page.cur {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div id="tab" class="tab-choose">
<ul>
<li class="tabCur">選擇一</li>
<li>選擇二</li>
<li>選擇三</li>
</ul>
</div>
<ul class="tab-cont">
<li id="page1" class="page cur">內容一</li>
<li id="page2" class="page">內容二</li>
<li id="page3" class="page">內容三</li>
</ul>
</div>
</body>
<script>
window.onload = function () {
var nav = document.getElementById('tab');
var navLi = nav.getElementsByTagName('li');
for (var i = 0, len = navLi.length; i < len; i++) {
(function (i) {
navLi[i].onclick = function () { //點選nav中的li，改變hash值
for (var j = 0;j<navLi.length;j++){
navLi[j].className = '';
}
location.hash = 'page' + (i + 1);
this.className='tabCur'
}
})(i);
}
location.hash = 'page1'; //每次頁面重新載入時都回到page1
var oldHash = location.hash;
window.onhashchange = function () {
var newHash = location.hash;
var oldPage = document.querySelector(oldHash);
var newPage = document.querySelector(newHash);
oldPage.classList.remove('cur');
newPage.classList.add('cur');
oldHash = newHash;
};
}
</script>
</html>