jQuery , js 写选项卡

运用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{width: 400px;height: 460px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
            .top{width: 400px;height: 60px;list-style: none;}
            .top li{float: left;width: 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{width: 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{width: 400px;height: 460px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}
            .top{width: 400px;height: 60px;list-style: none;}
            .top li{float: left;width: 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{width: 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>

 

posted @ 2017-03-07 16:55  虔诚_k  阅读(129)  评论(0编辑  收藏  举报