JavaScript全选框以及tab导航切换

不会咋办

已于 2022-10-10 16:00:42 修改

阅读量243

点赞数

文章标签： javascript 前端 html

于 2022-10-10 15:57:34 首次发布

本文链接：https://blog.csdn.net/qq_43201652/article/details/127246231

版权

全选框

 <div><input type="checkbox" id="checkall">全选</div>
    <ul>
        <li><input type="checkbox">商品1</li>
        <li><input type="checkbox">商品2</li>
        <li><input type="checkbox">商品3</li>
        <li><input type="checkbox">商品4</li>
        <li><input type="checkbox">商品5</li>
    </ul>
    <script>
        var all = document.getElementById("checkall")
        var checks = document.querySelectorAll("li>input")

        all.onclick = function () {
            for (var i = 0; i < checks.length; i++) {
                checks[i].checked = all.checked
            }
        }

        for(var i=0;i<checks.length;i++){
            checks[i].onclick=function(){
                var flag=true
                for(j=0;j<checks.length;j++){
                    if(!checks[j].checked){
                        flag=false
                    }
                }
                all.checked=flag
            }
        }


        // for (var i = 0; i < checks.length; i++) {
        //         checks[i].οnclick=function(){
        //             var count=0
        //             for(var j=0;j<checks.length;j++){
        //                 if(checks[j].checked){
        //                     count++
        //                 }
        //             }
        //             if(count==checks.length){
        //                 all.checked=true
        //             }else{
        //                 all.checked=false
        //             }
        //         }
        //     }

    </script>```


tab导航切换

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        .tab>a{
            width: 180px;
            height: 40px;
            float: left;
            background-color: rgb(102, 116, 153);
            color: #fff;
            margin-right: 10px;
            text-align: center;
            line-height: 40px;
        }
        .tab>.foucs{
            background-color: rgb(0, 85, 255);
        }
        .c{
            clear: both;
        }
        .content>div{
            display: none;
        }
        .content>.show{
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab">
        <a href="javascript:;" class="foucs">公司新闻</a>
        <a href="javascript:;">娱乐新闻</a>
        <a href="javascript:;">实时新闻</a>
        <a href="javascript:;">国际新闻</a>
    </div>
    <div class="content c">
        <div class="show">公司新闻</div>
        <div>娱乐新闻</div>
        <div>实时新闻</div>
        <div>国际新闻</div>
    </div>
    <script>
        var tabs=document.querySelectorAll(".tab>a")
        var content=document.querySelectorAll(".content>div")
        console.log(content)
        for(var i=0;i<tabs.length;i++){
            tabs[i].setAttribute("index",i); 
            tabs[i].onclick=function(){
                for(var j=0;j<tabs.length;j++){
                    tabs[j].className=""
                    content[j].style.display="none"
                }
                this.className="foucs"
                var thisIndex = this.getAttribute("index");
                content[thisIndex].style.display="block"    
            }
            
        }
    </script>
</body>
</html>