选项卡的三种实现功能,只需点击上面的导航标签即可切换下方内容
用原生js实现选项卡
以及闭包版
JQ方法实现选项卡
**
原生js
**
- CSS样式
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.box {
width: 600px;
margin: 100px auto 0;
}
#uu1 {
height: 30px;
}
#uu1 li {
height: 30px;
width: 50px;
background-color: yellowgreen;
float: left;
margin-right: 5px;
}
#uu1 li.current {
background-color: deeppink;
}
#uu2 li {
width: 600px;
height: 400px;
background-color: deeppink;
display: none;
font-size: 60px;
}
#uu2 li.current {
display: block;
}
</style>
- HTML部分
<div class="box">
<ul id="uu1">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<ul id="uu2">
<li class="current">风急天高猿啸哀</li>
<li>渚清沙白鸟飞回</li>
<li>无边落木萧萧下</li>
<li>不尽长江滚滚来</li>
<li>万里悲秋常作客</li>
<li>百年多病独登台</li>
</ul>
</div>
Script部分
<script>
//**原生js**
// //获取元素
var btnObjs=document.getElementById('uu1').getElementsByTagName('li');
var liObjs=document.getElementById('uu2').getElementsByTagName('li');
// 循环所有的btnObjs,注册点击事件
for (var i = 0; i < btnObjs.length; i++) {
//给每一个btnObjs添加自定义属性index
btnObjs[i].setAttribute('index',i);
// 给每一个btnObjs注册点击事件
btnObjs[i].onclick=function () {
//获取当前btnObjs的index值
var index=this.getAttribute('index');
// 初始化
for (var j = 0; j < btnObjs.length; j++) {
//2.给每个li的类名为空
btnObjs[j].className='';
liObjs[j].className=''
}
//1.给每个li添加类名
this.className='current';
liObjs[index].className='current';
}
}
</script>
script
//闭包版的
//获取元素
var btnObjs=document.getElementById('uu1').getElementsByTagName('li');
var liObjs=document.getElementById('uu2').getElementsByTagName('li');
for (var i = 0; i < btnObjs.length; i++) {
(function (index) {
btnObjs[i].onclick=function () {
for (var j = 0; j < btnObjs.length; j++) {
btnObjs[j].className='';
liObjs[j].className='';
}
this.className='current';
liObjs[index].className='current';
}
})(i);
}
JQ版的选项卡
<script src="../jQuery文件/jquery-1.12.1.js"></script>
<script>
$('#uu1 li').click(function(){
$(this).addClass('current').siblings().removeClass('current');
//获取索引值
var i = $(this).index()
$('#uu2 li').eq(i).addClass('current').siblings().removeClass('current');
})
</script>