选项卡切换原创

深处莫神

发布于 2022-8-10 15:35

3241浏览

0收藏

选项卡切换

选项卡切换-鸿蒙开发者社区
思路：
1.在进行选项卡切换的时候，是每个a标签进行的切换，而在取元素的时候取到的是整个a元素的数组，为了区分每个a元素，我们就可以给元素设置一个data-开头的自定义属性，使元素按照顺序排列下标
2.菜单点击时候进行两个操作，中间内容每个都装在同样大小的盒子里，在点击菜单后触发函数，函数进行两个操作，一个是中间内容的位置移动来切换对应的文本内容。一个是顶部a标签的背景颜色的灰白变化。
3.a标签的背景颜色的灰白变化，每次选中后颜色变化后，在下一次进行前先进行循环把颜色置为灰色，然后根据索引来控制选中的标签底色变为白色。
4.同理，通过大盒子左边在的位置，引用位置数组的索引来控制内容的切换

<!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;
        }

        #box {
            width: 800px;
            height: 600px;
            border: 4px solid #000;

        }

        #menu {
            width: 100%;
            display: inline-block;
            height: 100px;
            line-height: 100px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        #menu a {
            /* border: 3px solid red; */
            width: 25%;
            text-align: center;
            line-height: 100px;
            height: 100px;
            text-decoration: none;
            font-size: 30px;
            color: #000;
            font-weight: bold;
            background-color: #6c6c6c;
        }

        #menu a:first-child {
            background-color: #fff;
        }

        #content {
            width: 3200px;
            height: 500px;
            /* border: 4px solid red; */
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
            left: 0;
            transition: all ease-in-out .4s;
        }

        .item {
            width: 800px;
            height: 500px;
            line-height: 500px;
            /* border-right: 5px solid blue; */
            text-align: center;
            font-size: 50px;
            font-weight: bold;
        }

        .box {
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <div id="box">
        <!-- 导航 -->
        <nav id="menu">
            <a href="javascript:void(0)">国内新闻</a>
            <a href="javascript:void(0)">国际新闻</a>
            <a href="javascript:void(0)">体育新闻</a>
            <a href="javascript:void(0)">娱乐新闻</a>
        </nav>

        <div class="box">
            <div id="content">
                <div class="item">国内新闻</div>
                <div class="item">国际新闻</div>
                <div class="item">体育新闻</div>
                <div class="item">娱乐新闻</div>
            </div>
        </div>

    </div>
</body>

</html>
<script>
    var nav = document.getElementsByTagName('a')
    var content = document.getElementById('content')
    var menu = document.getElementById('menu')
    var position = ['0px', '-800px', '-1600px', '-2400px']
    var T;
    var index = 0
    // 循环
    for (i = 0; i < nav.length; i++) {
        nav[i].dataset.index = i;
    }

    menu.onclick = function (e) {
        index = e.target.dataset.index
        // 每次点击后 等再次点击时，先进行循环，把选项卡颜色更改为灰色，否则选中过的会保持上次选中时的白色
        for (var i = 0; i < nav.length; i++) {
            nav[i].style.background = '#6c6c6c'
        }
        nav[index].style.background = '#fff'
        content.style.left = position[index]
    }

    function autoplay() {
        if (index >= nav.length - 1) {
            index = 0
        }
        else {
            index++
        }
        for (var i = 0; i < nav.length; i++) {
            nav[i].style.background = '#6c6c6c'
        }
        nav[index].style.background = '#fff'
        content.style.left = position[index]
    }
    box.onmouseover = function () {
        clearInterval(T)
    }
    box.onmouseout = function () {
        T = setInterval(autoplay, 600)
    }
</script>

### 选项卡+移入移出类应用
![96025a382912816724409305b5f179a.png](3)

```javascript
<script>
    $(function () {
        $('.tab>li').mouseenter(function () {
            $(this).addClass('active').siblings('li').removeClass('active')
            // $(this).siblings().active = false
            var idx = $(this).index()
            $('.products>div').eq(idx).show().siblings('div').hide();
        })
    })
</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.

选项卡切换-鸿蒙开发者社区

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <ul class="tab">
            <li class="tab-item active">国际大牌<span>◆</span></li>
            <li class="tab-item">国妆名牌<span>◆</span></li>
            <li class="tab-item">清洁用品<span>◆</span></li>
            <li class="tab-item">男士精品</li>
        </ul>
        <div class="products">
            <div class="main selected">
                <a href="###"><img src="./assets/img/1.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="./assets/img/2.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="./assets/img/3.jpg" alt="" /></a>
            </div>
            <div class="main">
                <a href="###"><img src="./assets/img/4.jpg" alt="" /></a>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./assets/js/jquery-1.9.1.min.js"></script>
<script>
    $(function () {
        $('.tab>li').mouseenter(function () {
            $(this).addClass('active').siblings('li').removeClass('active')
            // $(this).siblings().active = false
            var idx = $(this).index()
            $('.products>div').eq(idx).show().siblings('div').hide();
        })
    })
</script>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.

分类

其他

标签

已于2022-8-16 17:50:44修改

51CTO

51CTO博客

51CTO学堂

选项卡切换原创

选项卡切换

完整代码

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

选项卡切换 原创

选项卡切换

完整代码

目录

订阅鸿蒙技术特刊，精选内容抢先看

选项卡切换原创