js,jq 实现选项卡问题!
正式进军前,我遇到的第一个问题便是js实现选项卡的问题,刚开始没有连接流程的时候可以说别人说什么都是听不进去的,像我这种人就适合自己一个人安静的研究或者思考问题,不知道大家是不是有一样的感受,所以还是要自己多敲代码,学习才行,下面我就对选项卡的实现做了一个总结,希望有用!
效果图:
具体实现的代码:
代码部分:
一、原生js实现:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 选项卡</title>
<style type="text/css">
/* CSS样式 */
* {
padding: 0px;
margin: 0px;
}
a {
/*文字修饰:可选择值:none,underline,overline*/
text-decoration: none;
color: black;
}
/*鼠标移动到a标签上的样式*/
a:hover {
text-decoration: none;
color: red;
}
#tab {
width: 270px;
padding: 5px;
height: 150px;
margin: 20px;
}
#tab ul {
list-style: none;/*列表样式*/
display: ;
height: 30px;
line-height: 30px; /*行距*/
border-bottom: 2px #C88 solid;
}
#tab ul li {
background: #FFF;
cursor: pointer; /*显示的光标形状*/
float: left; /*元素向左浮动*/
list-style: none height:29px;
line-height: 29px;
padding: 0px 10px;
margin: 0px 10px;
border: 1px solid #BBB;
border-bottom: 2px solid #C88;
}
#tab ul li.on {
border-top: 2px solid gray;
border-bottom: 2px solid #FFF;
}
#tab div {
height: 100px;
width: 250px;
line-height: 24px;
border-top: none;
padding: 1px;
border: 1px solid #336699;
padding: 10px;
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var myTab = document.getElementById("tab"); //整个div
var myUl = myTab.getElementsByTagName("ul")[0]; //一个节点
var myLi = myUl.getElementsByTagName("li"); //数组
var myDiv = myTab.getElementsByTagName("div"); //数组
for(var i = 0; i < myLi.length; i++) {
myLi[i].index = i;
myLi[i].onclick = function() {
for(var j = 0; j < myLi.length; j++) {
myLi[j].className = "off";
myDiv[j].className = "hide";
}
this.className = "on";
myDiv[this.index].className = "show";
}
}
}
</script>
</head>
<body>
<!-- HTML代码 -->
<div id="tab">
<ul>
<li class="off">测试一</li>
<li class="on">测试二</li>
<li class="off">测试三</li>
</ul>
<div id="firstPage" class="hide">
<a href="#">测试一内容</a><br/>
</div>
<div id="secondPage" class="show">
<a href="#">测试二内容</a><br/>
</div>
<div id="thirdPage" class="hide">
<a href="#">测试三内容</a><br/>
</div>
</div>
</body>
</html>
二、jq实现选项卡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>jp实现选项卡</title>
<link href="css/bootstrap.css" rel="stylesheet">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.content {
padding: 100px;
}
.ct-ul {
list-style: none;
display: flex;
margin-bottom: 0;
}
.ct-ul li {
padding: 5px 10px;
margin-right: -1px;
border: solid 1px #ccc;
border-bottom: none;
cursor: pointer;
}
.ct-list {
border: solid 1px #ccc;
margin-top: -1px;
min-height: 100px;
}
.one {
background-color: #fff;
}
</style>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
$(function() {
$(".item:gt(0)").hide(); //选择item类0之后的元素隐藏,为0的这个元素显示
//主要逻辑就在于找到选项卡和内容框相对应的下标
//jq中 unbind():移除被选元素的事件处理程序;
$(".ct-li").unbind('click').click(function() {
var _index = $(this).index(); //获取点击元素的下标
$(this).addClass("one") //给点击的元素添加类
.siblings().removeClass(); //同胞元素隐藏类
$(".item").eq(_index).show()
.siblings().hide(); //选择item元素中第_index个显示出来,相邻元素被隐藏
})
})
</script>
</head>
<body>
<div class="content">
<ul class="ct-ul">
<li class="ct-li one">选项一</li>
<li class="ct-li">选项二</li>
<li class="ct-li">选项三</li>
<li class="ct-li">选项四</li>
</ul>
<div class="ct-list">
<div class="item">选项一内容</div>
<div class="item">选项二内容</div>
<div class="item">选项三内容</div>
<div class="item">选项四内容</div>
</div>
</div>
</body>
</html>