<!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>