js选项卡的实现方法:
先写好一个html css的页面样式
html css部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡</title>
</head>
<style type="text/css">
* {
padding: 0;
margin: 0;
list-style: none;
}
.box {
width: 50%;
margin: 0 auto;
}
.nav {
width: 100%;
}
.nav li {
width: 25%;
float: left;
text-align: center;
border: 1px solid #000;
box-sizing: border-box;
border-right: none;
line-height: 2;
cursor: pointer;
}
.nav li:last-child {
border-right: 1px solid #000;
}
.nav li.checked {
border-bottom: 1px solid #ddd;
background: #ddd;
}
.subnav {
border: 1px solid #000;
border-top: none;
background: #ddd;
}
.subnav li {
width: 100%;
text-align: center;
height: 100px;
line-height: 100px;
display: none;
}
.subnav li:first-child {
display: block;
}
.clearfix:after {
content: " ";
display: block;
clear: both;
}
</style>
<body>
<div class="box">
<ul class="nav clearfix">
<li class="checked">选项一</li>
<li>选项二</li>
<li>选项三</li>
<li>选项四</li>
</ul>
<ul class="subnav">
<li>我是选项一</li>
<li>我是选项二</li>
<li>我是选项三</li>
<li>我是选项四</li>
</ul>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</html>
下面用js和jq分别写出来
//js的方法
window.onload=function(){
//找对象的方法很多 我这里用的是比较原始的 可以根据个人爱好自行选
var navUl=document.getElementsByClassName("nav")[0];//这是单独找一个 所以需要加上下标下同
var subnavUl=document.getElementsByClassName("subnav")[0];
var navLi=navUl.getElementsByTagName("li"); //这里要找到navUl里面所有的li所以不加下标下同
var subnavLi=subnavUl.getElementsByTagName("li");
for(var i=0;i<navLi.length;i++){//循环navUl里面的li
navLi[i].index=i;//navLi[i].index是指navUl里面的li的下标(index);为该li添加一个index属性,并将index的值设置为i
navLi[i].onclick=function(){//点击事件 点击navUl里面的li
for(var j=0;j<navLi.length;j++){//循环去掉navUl里面的li的所有样式,把点击所对应subnav里面的li显示出来
navLi[j].removeAttribute("class");//清除navUl里面的所有li样式
subnavLi[j].style.display="none";//隐藏subnavLi里面li
}
this.setAttribute("class","checked");//给所navUl里面点击的li样式
subnavLi[this.index].style.display="block"//让subnavLi里面所对应的li显示
}
}
//jq的方法 jq包 上面已经引入好了 当然也可以自行引入
//因为jq的选择器很好 很强大 所以非常简单
$(function(){
$(".nav li").click(function(){//直接点击事件
$(this).addClass("checked").siblings().removeClass("checked");//给当前点击的li一个样式 移除当前li的所有同胞元元素的样式
$(".subnav li").eq($(this).index()).show().siblings().hide();//让subnav里面当前点击元素下标所对应的li显示 隐藏subnav里面当前点击元素下标以外的li
})
})
当然写选项卡的方法有很多 我只写了两个最简单的 最常用的