运用jq 写选项卡：
使用jq时，先引入jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}
.clearfix:after{content: '';clear: both;display: block;}
.box{ 400px;height: 460px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
.top{ 400px;height: 60px;list-style: none;}
.top li{float: left; 100px;line-height: 60px;height: 60px;border: 1px solid #ccc;text-align: center;}
.top .on{background-color: #00FF00;color:#fff}
.down{height: 400px;list-style: none;}
.down li{ 400px;height: 400px;background-color: red;float: left;display: none;}
.down li:nth-child(2){background-color: yellow;}
.down li:nth-child(3){background-color: green;}
.down li:nth-child(4){background-color: black;}
.down .on{display: block;}
</style>
</head>
<body>
<div class="box">
<ul class="top clearfix">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="down clearfix">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//思路一
// $('.top li').on('click',function(){
//所有父级以上节点 找到 下面的 top其中的所有 li
// $(this).parents().find('.top li').removeClass();
// $(this).addClass('on');
//通过当前元素的祖先元素 找到 下面的 down其中的所有 li
// $(this).parents().find('.down li').removeClass();
// $(this).parents().find('.down li').eq($(this).index()).addClass('on');
// })
//思路二
$('.top li').on('click',function(){
//同级 移除 class 不包括自己*
$(this).siblings().removeClass();
//当前添加 on
$(this).addClass('on');
//直接父集的同级元素 下的所有子集 移除class
$(this).parent().siblings().children().removeClass();
//直接父集的同级元素 下的角标与 当前角标相同的 添加on
$(this).parent().siblings().children().eq($(this).index()).addClass('on');
// $(this).addClass('on').siblings().removeClass().parent().siblings().children().eq($(this).index()).addClass('on').siblings().removeClass();
})
</script>
</body>
</html>
js写的：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing: border-box;}
.clearfix:after{content: '';clear: both;display: block;}
.box{ 400px;height: 460px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
.top{ 400px;height: 60px;list-style: none;}
.top li{float: left; 100px;line-height: 60px;height: 60px;border: 1px solid #ccc;text-align: center;}
.top .on{background-color: #00FF00;color:#fff}
.down{height: 400px;list-style: none;}
.down li{ 400px;height: 400px;background-color: red;float: left;display: none;}
.down li:nth-child(2){background-color: yellow;}
.down li:nth-child(3){background-color: green;}
.down li:nth-child(4){background-color: black;}
.down .on{display: block;}
</style>
</head>
<body>
<div class="box">
<ul class="top clearfix">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<ul class="down clearfix">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//面向过程
// var topLi = $('.top li');
// var downLi = $('.down li');
// console.log(topLi,downLi)
// for(var i=0;i<topLi.length;i++){
// topLi[i].index = i;
// topLi[i].onclick = function(){
// console.log(1);
// for(var j=0;j<downLi.length;j++){
// topLi[j].className = '';
// downLi[j].className= '';
// if(this.index == j){
// topLi[this.index].className = 'on';
// downLi[this.index].className = 'on';
// }
// }
// };
// };
//面向对象
function ClickChange(cl,cc){
this.topLi = $(cl);
this.downLi = $(cc);
var _this = this;
for(var i=0;i<this.topLi.length;i++){
this.topLi[i].index = i;
this.topLi[i].onclick = function(){
console.log(_this.downLi);
for(var j=0;j<_this.downLi.length;j++){
_this.topLi[j].className = '';
_this.downLi[j].className = '';
if(this.index == j){
_this.topLi[this.index].className ='on';
_this.downLi[this.index].className ='on';
}
}
}
}
}
var a = new ClickChange('.top li','.down li');
</script>
</body>
</html>