选项卡
一.使用css实现
实现思路
1.选项卡通过锚链接获取content 给content添加id选择器，nav通过id选择器获取content内容
2.隐藏所有的content
3.通过target属性（ #content1:target）控制被选中的content的样式 设置为显示
实现代码
1.html
<div class="tab">
<ul class="nav">
<li>
<a href="#content1">
选项1
</a>
</li>
<li>
<a href="#content2">
选项2
</a>
</li>
<li>
<a href="#content3">
选项3
</a>
</li>
<li>
<a href="#content4">
选项4
</a>
</li>
</ul>
<div class="content">
<div id="content1">
内容1
</div>
<div id="content2">
内容2
</div>
<div id="content3">
内容3
</div>
<div id="content4">
内容4
</div>
</div>
</div>
2.css
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
body {
background:skyblue;
}
.tab {
width: 800px;
margin: auto;
}
.nav {
height: 50px;
width: inherit;
display: flex;
justify-content: center;
overflow: hidden;
margin-top: 50px;
}
.nav li {
width: 20%;
height: 50px;
background-color: #F0F8FF;
margin: 0px 1px;
text-align: center;
border-radius: 10px;
}
.nav li a {
display: block;
width: 100%;
height: 50px;
font-size: 12px;
line-height: 50px;
transition: .22s ease;
}
.nav li a:hover {
background-color: #F5F5DC;
border-radius: 10px;
}
.content div {
height: 450px;
width: 100%;
background-color: #F5F5DC;
display: none;
}
#content1:target {
display: block;
background-color: #F5F5DC;
}
#content2:target {
display: block;
}
#content3:target {
display: block;
}
#content4:target {
display: block;
}
3.如图
二.利用js实现
实现思路
主要完成两个功能：1.点击li样式变化 2.点击li的同时同索引的div显示其他div隐藏。
1.获取元素
var nav_child=document.getElementsByTagName('li');
其中getElementsByTagName可返回带有指定标签名的对象的集合。var ctn=document.getElementsByClassName('ctn');
其中getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
2.定义外循环记录索引值（通过index方法）
3.添加点击事件 定义内循环 内循环用于隐藏li的样式 以及隐藏div
4.点击时给li添加样式（通过className方法）；给li同索引的div增加样式使其显示（style方法）
实现代码
1.html
<div class="tab">
<ul class="nav">
<li class="show_nav">
选项1
</li>
<li>
选项2
</li>
<li>
选项3
</li>
<li>
选项4
</li>
</ul>
<div class="content">
<div class="ctn" style="display: block;">
内容1
</div>
<div class="ctn" style="display: none;">
内容2
</div>
<div class="ctn" style="display:none;">
内容3
</div>
<div class="ctn" style="display: none;">
内容4
</div>
</div>
</div>
2.css
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.tab {
width: 100%;
margin: auto;
}
.nav {
width: 500PX;
height: 50px;
background-color: #ace5e5;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.nav li {
width: 25%;
text-align: center;
height: 50px;
line-height: 50px;
}
.nav li:hover {
cursor: pointer;
color: #A52A2A;
}
.show_nav {
color: #A52A2A;
background-color: #FFF8DC;
}
3.javaScript
window.onload = function() {
//(1)var nav_child =$('.nav li'); //此处通过也可以jquery通过获取li列表
//(2)var nav_child=document.getElementsByTagName('li'); //通过TagName获取li列表
var nav_child=document.querySelectorAll('.tab li');//querySelectorAll使用类名获取li列表
var ctn=document.querySelectorAll('.ctn');//获取div列表
var i=0;
for(i=0;i<nav_child.length;i++){
nav_child[i].index=i;//记录索引值
// nav_child[i].onclick设置为点击，nav_child[i].onmouseover鼠标滑过
nav_child[i].onclick=function(){
for(i=0;i<nav_child.length;i++){
nav_child[i].className="";//清除li的class属性
ctn[i].style.display="none";
}
this.className="show_nav";
ctn[this.index].style.display="block";
};
};
}
如图
三.选项卡封装
1.html代码
复用时修改tab1类名
<!--使用新的选项卡，将tab1命名为tab2-->
<div class="tab1">
<ul class="nav">
<li class="show_nav">
选项1
</li>
<li>
选项2
</li>
<li>
选项3
</li>
<li>
选项4
</li>
</ul>
<div class="content">
<div class="ctn" style="display: block;">
内容1
</div>
<div class="ctn" style="display: none;">
内容2
</div>
<div class="ctn" style="display:none;">
内容3
</div>
<div class="ctn" style="display: none;">
内容4
</div>
</div>
</div>
2.CSS
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.tab1 {
width: 100%;
margin: auto;
}
.nav {
width: 500PX;
height: 50px;
background-color: #ace5e5;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.nav li {
width: 25%;
text-align: center;
height: 50px;
line-height: 50px;
}
.nav li:hover {
cursor: pointer;
color: #A52A2A;
}
.show_nav {
color: #A52A2A;
background-color: #FFF8DC;
}
3.js
当使用选项卡2时，先定义变量
var nav_child2,ctn2;再调用navtab函数navtab(nav_child2,ctn2,".tab2 li",".tab2 .ctn","onclick");
window.onload=function(){
function navtab(nav_child,ctn,cid_select,ctn_select,Events){//Events为事件
var nav_child=document.querySelectorAll(cid_select);//使用li列表
var ctn=document.querySelectorAll(ctn_select);//获取div列表
var i=0;
for(i=0;i<nav_child.length;i++){
nav_child[i].index=i;//记录索引值
// nav_child[i].onclick设置为点击，nav_child[i].onmouseover鼠标滑过
if(Events=="onmouseover"){
nav_child[i].onmouseover=function(){
for(i=0;i<nav_child.length;i++){
nav_child[i].className="";//清除li的class属性
ctn[i].style.display="none";
}
this.className="show_nav";
ctn[this.index].style.display="block";
};
}else{
nav_child[i].onclick=function(){
for(i=0;i<nav_child.length;i++){
nav_child[i].className="";//清除li的class属性
ctn[i].style.display="none";
}
this.className="show_nav";
ctn[this.index].style.display="block";
};
}
};
}
// 选项卡1
var nav_child1,ctn1;
navtab(nav_child1,ctn1,".tab1 .nav li",".tab1 .ctn","onclick");
// 选项卡2
// var nav_child2,ctn2;
// navtab(nav_child2,ctn2,".tab2 .nav li",".tab2 .ctn","onclick");
}
浙公网安备 33010602011771号