DOM练习题-TAB栏切换

最新推荐文章于 2024-06-17 09:00:23 发布

丿Wbb丿

最新推荐文章于 2024-06-17 09:00:23 发布

阅读量133

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_68494982/article/details/127952696

版权

<!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>tab栏切换</title>
    <style>
        li {
            list-style: none;
        }
        
        .box {
            width: 500px;
            height: 1000px;
            margin: 10px auto;
            background-color: cadetblue;
        }
        
        .top {
            height: 30px;
            background-color: bisque;
        }
        
        .top ul {
            width: 100%;
            height: 100%;
            padding: 0;
        }
        
        .top li {
            float: left;
            width: 166px;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        
        .button1 {
            display: none;
            width: 100%;
            height: 970px;
            background-color: beige;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="top">
            <ul>
                <li>比尔吉沃特</li>
                <li>艾欧尼亚</li>
                <li>诺克萨斯</li>
            </ul>
        </div>
        <div class="button">
            <div class="button1">比尔吉沃特是走私贩、劫掠者和不义之徒的避难港湾。在这里，富可敌国或是家破人亡都只在转瞬之间。对于那些逃避审判、债务和迫害的人，这个城市能让他们重获新生，因为在比尔吉沃特的蜿蜒街路上，没人会在乎你的过去。这里是不同文化、种族、和信仰的大熔炉，无时不在蠢蠢欲动。虽然比尔吉沃特是极其危险的地方，但这里也充满了机遇，不受到任何政府、法令、和道德的制约束缚。无论是来路不正的海克斯科技，还是当地黑帮的俯首听命，只要你出得起钱，一概唾手可得。话虽如此，每当拂晓之际，粗心大意之人都会漂在港湾中，钱袋空空，喉头见血。

            </div>
            <div class="button1">艾欧尼亚的土地上充盈着未遭破坏的自然之美和原生魔法。这座庞大的岛屿上四散着人类的定居点，这是一群充满灵性的人，追求着平静和谐、与世无争的生活。艾欧尼亚境内存在许多教派和社团，每一派都遵循各自（常常是彼此冲突的）的教义与理念。 艾欧尼亚自给自足、闭关锁国，在数世纪以来瓦洛兰大陆上的多次战争中大多保持中立姿态——直到诺克萨斯的入侵。这次野蛮的侵略强迫艾欧尼亚重新审视自己在这个世界上的位置。它会采取怎样的措施、它未来的路何去何从，一切都未可预知。但无论艾欧尼亚的选择如何，符文之地的命运都必将因此而改变。

            </div>
            <div class="button1">诺克萨斯是一个威名震天的强大帝国。在诺克萨斯境外的人眼中，它拥兵自重、血腥野蛮、欲壑难填，但对于那些看透它好战外表的人来说，这里的社会氛围实际上超乎寻常地包容。人民的所有特长和天赋都会得到尊重和受到培养的机会。诺克萨斯人曾经是一群残暴的掠夺者，他们占领了一座古城，并将其建成了现在的帝国中心。当时的诺克萨斯面临着来自各方的威胁，所以他们与所有敌人都激烈交锋，睚眦必报，不胜不归，最终让帝国的版图连年扩张。这一段艰难求生的历史让诺克萨斯人从骨子里感到骄傲自豪，也因此重视力量胜过一切。当然，力量可以通过许多不同的形式表现。无论社会立场、身世背景、祖国故乡和个人财富如何，任何人都可能在诺克萨斯获得权力、地位、和尊敬，只要他们能够表现出必要的能力。</div>
        </div>
        <script>
            var uls = document.querySelector('.top');
            var lis = uls.querySelectorAll('li');
            var texts = document.querySelectorAll('.button1');
            for (var i = 0; i < lis.length; i++) {
                lis[i].setAttribute('index', i);
                // 更改自定义属性
                lis[i].onclick = function() {
                    for (var i = 0; i < lis.length; i++) {
                        lis[i].style.backgroundColor = '';
                        // 排他思想
                    }
                    this.style.backgroundColor = 'pink';
                    var index = this.getAttribute('index');
                    // 获取当前的自定义属性
                    for (var i = 0; i < lis.length; i++) {
                        texts[i].style.display = 'none';
                        // 排他思想
                    }
                    texts[index].style.display = 'block';
                    // 数组
                }
            }
        </script>
    </div>
</body>

</html>