响应式选项卡

最新推荐文章于 2022-11-30 19:03:27 发布

置顶 jiepp

最新推荐文章于 2022-11-30 19:03:27 发布

阅读量461

点赞数

文章标签：选项卡

本文链接：https://blog.csdn.net/jiepp/article/details/101147315

版权

响应式选项卡

网页展示：

网站显示

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d {position: absolute;margin: auto;left: 0;right: 0;width: 50%;min-width: 400px}
        #u {display: flex;height: 50px}
        #u li {text-align: center;line-height: 50px;list-style: none;flex: 1;margin-left: 10px}
        #u li:hover {background-color: #02B2B5;color: white}
        #d1 ul {display: none;flex-flow: column wrap;height: 800px}
        #d1 ul li {background-size: cover;list-style: none;height: 210px;margin: 15px;width: 50%}
        #d1 ul:nth-child(1) li {background: url("img/1.PNG") no-repeat}
        #d1 ul li::before {content: "hello";display: block;transition: all 0.3s;font-size: 30px;opacity: 0;background-color: #02B2B5;color: white;height: 210px;text-align: center;line-height: 210px;transform: scale(0.8);border-radius: 30px}
        #d1 ul li:hover::before {opacity: 0.8;transform: scale(1);border-radius: 0}
        .act {display: flex !important}
        .act1 {background-color: #02B2B5;color: white}
    </style>
</head>
<body>
<div id="d">
    <ul id="u">
        <li class="act1">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div id="d1">
        <ul class="act">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<script>
    var oli = document.querySelectorAll("#u li");
    var oul = document.querySelectorAll("#d1 ul");
    // 同步按钮与页面
    for (var j = 0; j < oli.length; j++) {
        oli[j].index = j;
        oli[j].addEventListener("mouseover", function () {
            for (var j = 0; j < oli.length; j++) {
                oli[j].className = ""
            }
            for (var j = 0; j < oul.length; j++) {
                oul[j].className = ""
            }
            this.className = "act1"
            oul[this.index].className = "act"
            var oli1 = oul[this.index].querySelectorAll("li");
            // 图片加载
            for (var i = 0; i < oli1.length; i++) {
                oli1[i].style.background = "url(img/" + (this.index + 1) + ".PNG)";
                console.log(this.index);
            }
        })
    }
</script>
</body>
</html>

全部代码作于2019年-9月-21日

jiepp

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
响应式选项卡

响应式选项卡网页展示：编辑器制作效果展示：代码展示：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #d {position: ...
复制链接

扫一扫