用四种不同的方法实现 tab栏切换

半江秋月

已于 2022-05-27 09:51:27 修改

阅读量1.1k

点赞数 3

分类专栏： js 文章标签： css html jquery javascript

于 2022-05-27 09:49:17 首次发布

本文链接：https://blog.csdn.net/q2211164/article/details/124997834

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

基础片段

<!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: 0px;
            padding: 0px;
        }
        
        .tab {
            width: 300px;
            height: 30px;
        }
        
        .tab p {
            width: 70px;
            height: 26px;
            background-color: #ccc;
            border-radius: 10px;
            float: left;
            text-align: center;
            line-height: 26px;
            margin-right: 8px;
            cursor: pointer;
        }
        
        ul li {
            list-style-type: none;
        }
        
        .content {
            width: 300px;
            height: 400px;
            border: 1px solid red;
        }
        
        ul {
            display: none;
        }
    </style>

</head>

<body>
    <div class="content">
        <!--我的tab切换选项-->
        <div class="tab">
            <p cate-id="0">八卦新闻</p>
            <p cate-id="1">国际新闻</p>
            <p cate-id="2">国内新闻</p>
        </div>
        <!--我的新闻内容-->
        <div class="news">
            <!--八卦新闻-->
            <ul>
                <li>1.陈伟霆杨幂上演师徒恋，这部古装剧评分翻车冤吗？</li>
                <li>2.《香山叶正红》今晚亮相央视</li>
                <li>3.新民艺评｜《突围》中的两场戏，恍若回到话剧舞台</li>
                <li>4.人民日报关注！中国长春电影节将举办</li>
                <li>5.郑恺退出火凤祥 明星餐厅难出“明星”</li>
            </ul>
            <!--国际新闻-->
            <ul>
                <li>1.哈里斯在掌权的85分钟里做了啥？</li>
                <li>2.俄方透露：普京可能在今年年底前同拜登会面</li>
                <li>3.这场高调“亲密秀”，背后暗藏紧张……</li>
                <li>4.79岁拜登欲参加总统竞选连任？民主党内分歧依旧</li>
                <li>5.美潜艇部队为何收到罕见指令？</li>
            </ul>
            <!--国内新闻-->
            <ul>
                <li>1.城事 | 天津16地又上榜了！你都去过吗？</li>
                <li>2.天津这个景区发布闭园通知！</li>
                <li>3.广西90后美女做这事上了央视，还吸粉140万！</li>
                <li>4.新开2条公交，苏州直达上海！</li>
                <li>5.东莞，深藏不露。</li>
            </ul>
        </div>
    </div>
</body>

</html>

样式：

第一种：索引方法

 let btns = document.querySelectorAll('.tab p');
        let uls = document.querySelectorAll('.news ul');
        console.log(btns);
        console.log(uls);
        for (let i = 0; i < btns.length; i++) {
            btns[i].index = i;
            // console.log(btns[i].index);
            //console.log(btn[i].index);
            btns[i].onclick = function() {
                for (let i = 0; i < btns.length; i++) {

                    btns[i].style.background = 'none';
                    uls[i].style.display = 'none'
                }
                this.style.background = 'red';
                uls[this.index].style.display = 'block'
                    // divs[this.index].style.display = 'block';
            }
        }

第二种：使用自定义属性值

 let btns = document.querySelectorAll('.tab p');
        let uls = document.querySelectorAll('.news ul');
        for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function() {
                for (let i = 0; i < btns.length; i++) {

                    btns[i].style.background = 'none';
                    uls[i].style.display = 'none'
                }
                let index = this.getAttribute('cate-id');
                this.style.background = 'red';
                uls[index].style.display = 'block'

            }
        }

第三种：jq中的index()方法

   $('.tab p').click(function() {
            let index = $(this).index();
            $('.news ul').css('display', 'none')
            $('.news ul')[index].style.display = 'block';
            console.log($('.news ul'))
            $(this).css('background', 'red').siblings().css('background', 'none')
        })

第四种：jq中的自定义属性

 $('.tab p').click(function() {
            let index = $(this).attr('cate-id')
            $(this).css('background', 'red').siblings().css('background', 'none');
            $('.news ul').css('display', 'none')
            $('.news ul')[index].style.display = 'block';
            console.log(index);
        })