实现选项卡切换的三种⽅式
⾸先我⽤Jquery库实现了⼀个简单的效果，
只需要点击上⾯的导航标签即可切换下⽅内容，Html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>tab切换</title>
<style type="text/css">
*{padding:0;margin:0;font:normal 15px "微软雅⿊";color:#000;}
ul{list-style-type: none;padding-left: 5px;margin-bottom: -2px}
.tab{width:500px;margin: 10px auto}
a{text-decoration: none;}
.title li{display: inline-block;border: 1px solid #999;border-bottom: 2px solid #a00;background: #fff;text-align: center;width: 60px;height: 30px;margin: 0 1px;line-height: 30px}        .title .active{border-top:2px solid #a00;border-bottom: 2px solid #fff; }
#content{margin: 0;border: 1px solid #ccc;border-top: 2px solid #a00;width: 300px}
#content div{display: none;padding: 10px 0}
#content .mod{display: block;}
</style>
</head>
<body>
<div class="tab">
<ul class="title">
<li class="active"><a href="#">房产</a></li>
<li><a href="#">家居</a></li>
<li><a href="#">⼆⼿房</a></li>
<!--<li><a href="#">家居</a></li>-->
</ul>
<div id="content">
<div class="mod">
<ul>
<li><a href="#">房产内容1</a></li>
<li><a href="#">房产内容2</a></li>
<li><a href="#">房产内容3</a></li>
</ul>
</div>
<div class="mod" >
<ul>
<li><a href="#">家居内容1</a></li>box sizing
<li><a href="#">家居内容2</a></li>
<li><a href="#">家居内容3</a></li>
</ul>
</div>
<div class="mod" >
<ul>
<li><a href="#">⼆⼿房内容1</a></li>
<li><a href="#">⼆⼿房内容2</a></li>
<li><a href="#">⼆⼿房内容3</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
View Code
Jquery代码如下：
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".title li").click(function(){
/
/            var $this=$(this);
//            alert($this.index());
$(this).addClass("active").siblings().removeClass("active");
$("#content .mod").eq($(".title li").index(this)).show().siblings("#content .mod").hide();
});
});
</script>
View Code
相信⼤家⽤Jquery都是⽐较轻松，紧接着我⼜尝试了⽤源⽣的js代码来实现这种效果，效果图如下：
实现所需的html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{padding: 0;margin: 0;box-sizing: border-box}
div{width: 70%;margin: 20px auto;}
ul{
list-style: none;overflow: hidden;
}
#nav{
width: 400px;height: 40px;text-align: center;line-height: 40px;
background: #c5c5c5;
}
#nav li{
width: 25%;height: 40px;float: left;border: 1px solid #c5c5c5;
border-bottom: none;
}
#nav li.active{
background: #fff;
}
#content{
width: 400px;height: 300px;position: relative;border: 1px solid #c5c5c5;border-top: none;
}
#content li{width: 100%;height: 100%;position: absolute;padding: 10px;display: none}
</style>
</head>
<body>
<div>
<ul id="nav">
<li class="active">选项⼀</li>
<li>选项⼆</li>
<li>选项三</li>
<li>选项四</li>
</ul>
<ul id="content">
<li >内容⼀</li>
<li>内容⼆</li>
<li>内容三</li>
<li>内容四</li>
</ul>
</div>
</body>
</html>
View Code
js代码如下：
<script type="text/javascript">
var nav =ElementById("nav");
var navlist = nav.children;
var con = ElementById("content");
var conlist = con.children;
for (var i= 0;i<navlist.length;i++){
navlist[i].index = i;
navlist[i].onclick = function (){
for (var m = 0;m< conlist.length;m++){
navlist[m].className = "";
conlist[m].style.display ="none";
}
this.className = "active";
conlist[this.index].style.display = "block";
}
}
</script>
如果说⼤家在写页⾯的时候需要多次实现选项卡效果，但是⼜不想造成代码重复该怎么办呢？我们这时候可以使⽤函数封装概念来封装⼀个函数⽅法来实现多次调⽤。
html代码同上，js封装⽅法代码如下：
<script type="text/javascript">
function change(navid,conid){
var nav = ElementById(navid);
var navlist = ElementsByTagName("li");
var con = ElementById(conid);
var conlist = ElementsByTagName("li");
for (i=0;i<navlist.length;i++){
navlist[i].onclick = function (i){
return function (){
for (m = 0;m<conlist.length;m++){
navlist[m].className ="";
conlist[m].style.display = "none";
}
this.className = "active";
conlist[i].style.display = "block";
}
}(i);
}
};
change("nav","content");      //调⽤函数⽅法
</script>
View Code
好了，以上就是实现选项卡切换的三种⽅法，感谢。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。