siblings ---选择兄弟集合(标签相同)

最新推荐文章于 2022-12-21 19:04:35 发布

维克多噗噗

最新推荐文章于 2022-12-21 19:04:35 发布

阅读量1.2k

点赞数

分类专栏：知识点

知识点专栏收录该内容

52 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";}
        #box{width: 500px;height: 400px;margin: 30px auto;border: 1px solid #333;}
        #card{height: 50px;background: pink;}
        #card li{width: 60px;height: 50px;float: left;border-right: 1px solid #333;text-align: center;line-height: 50px;}
         #card li.active{background: green;color: #fff;}
         #tab li{height: 450px;width: 500px;position: absolute;display: none}
    </style>
</head>
<body>
    <div id="box">
        <ul id="card">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ul id="tab">
            <li style="display:block">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <script type="text/javascript">
        var cards = document.getElementById("card").children;
        var tabs = document.getElementById("tab").children;
        for(var i=0;i<cards.length;i++){
            cards[i].index = i;
            cards[i].onclick = function(){
                // for(var j=0;j<cards.length;j++){
                //     cards[j].className = "";
                //     tabs[j].style.display = "none";
                // }
                this.className = "active";
                siblings(this,function(){
                    this.className = "";
                });
                tabs[this.index].style.display = "block";
                siblings(tabs[this.index],function(){
                    this.style.display = "none";
                });
            };
        };

        function siblings(param,callBack){
            var Doms = param.parentNode.children;
            // for(var i=0;i<Doms.length;i++){
            //  if(Doms[i] != param && Doms[i].tagName == param.tagName ){
            //      callBack.call(Doms[i]);
            //  };
            // };
            var arr = [].slice.call(Doms);
            arr.filter(function(dom){
                if(dom != param && dom.tagName == param.tagName){
                    callBack.call(dom);
                };
            });
        };

    </script>
</body>
</html>

sort 类数组添加到数组

var arr = [].slice.call(Doms);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content=" ">
    <title>Document</title>
    <style type="text/css">
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        ul,li{list-style: none;}
        body{font-size: 14px;font-family: "微软雅黑";padding: 100px;}
        div{width: 100px;height: 20px;text-align: center;line-height: 20px;background: red;color: #fff;margin-top: 3px;}
    </style>
</head>
<body>
    <input type="button" id="btn" value="排序" onclick="fn()" />
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <script type="text/javascript">
        //类数组
        var divDoms = document.getElementsByTagName("div");
        var arr = [].slice.call(divDoms);  //直接操控divDoms
        var mark = true;
        function fn(){
            mark = !mark;
            arr.sort(function(a,b){
                var d1 = a.innerHTML;
                var d2 = b.innerHTML;
                if(mark){
                    return d1>d2;
                }else{
                    return d1<d2;
                };
            });
            for(var i=0;i<arr.length;i++){
                document.body.appendChild(arr[i]);
            };
        };


        var arr2 = [1,2,3,4,5];
        // alert(arr2.slice(0,3));
        // alert(arr2.slice());
    </script>
</body>
</html>

维克多噗噗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
siblings ---选择兄弟集合(标签相同)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margin: 0;padding: 0;}
复制链接

扫一扫

专栏目录