CSS, JavaScript, jQuery实现标签页切换

最新推荐文章于 2022-10-02 14:55:22 发布

Ayhan_huang

最新推荐文章于 2022-10-02 14:55:22 发布

阅读量951

点赞数

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

本文链接：https://blog.csdn.net/Ayhan_huang/article/details/77169398

版权

javascript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

效果图参考：
这里写图片描述
基本实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .outer {
            width: 60%;
            margin: 50px auto;
            background-color: #99aecb;
            height: 500px;
        }

        .title {
            background-color: #cccccc;
            border-bottom: red solid 1px;
        }

        .title li {
            display: inline-block;
            padding: 10px;
        }

        .title .activate {
            color: white;
            background-color: red;
        }

        .hide {
            display: none;
        }

    </style>
</head>
<body>

<div class="outer">
    <ul class="title">
        <li class="activate" relate="1">商品介绍</li>
        <li relate="2">规格包装</li>
        <li relate="3">售后保障</li>
    </ul>
    <div class="content">
        <div id="1">page1</div>
        <div class="hide" id="2">page2</div>
        <div class="hide" id="3">page3</div>
    </div>
</div>

</body>
<script src="jquery-3.2.1.js"></script>
<script>
    //点击title内的三个标题，this增加activate，其余去除activate
    //取得this的索引，根据索引取出content中对应的页面，去除hide, 其余页面加hide
    //jq事件委派
    $(".title").on("click", "li", function () { //记住，子元素没有$
        $(this).addClass("activate");
        $(this).siblings().removeClass("activate");
        var $index = $(this).index();
        $(".content div").eq($index).removeClass("hide").siblings().addClass("hide");
    });
    //jq事件绑定实现
    //    $("li").click(function(){
    //        $(this).addClass("activate");
    //        $(this).siblings().removeClass("activate");
    //        var $index = $(this).index();
    //        $(".content div").eq($index).removeClass("hide").siblings().addClass("hide");
    //    });

    /// JS 实现 //
    //
    //    var tabs = document.getElementsByClassName("title")[0].children;
    //    var pages = document.getElementsByClassName("content")[0].children;
    //
    //    for (var i=0; i<tabs.length; i++) {
    //        //为每个标题都绑定函数
    //        tabs[i].onclick = function() {
    //            //每次执行函数都要遍历所有标题，判断为当前点击标题，增加"activate"，否则移除"activate"
    //            for(var j=0; j<tabs.length; j++) {
    //                if (tabs[j]==this) {
    //                    tabs[j].classList.add("activate");
    //                    relateId = this.getAttribute("relate"); //当前点击元素relate属性对应的id值
    //
    //                } else {
    //                    tabs[j].classList.remove("activate")
    //                }
    //            }
    //
    //            //根据自定义的relate属性，将标题和页面关联起来
    //            var relateId = this.getAttribute("relate");
    //            //当前激活标签relate属性对应的id，通过它，找到对应的显示页面
    //            var current_page = document.getElementById(relateId);
    //            for (var k=0; k<pages.length; k++) {
    //                if (pages[k] == current_page) {
    //                    pages[k].classList.remove("hide");
    //                } else {
    //                    pages[k].classList.add("hide");
    //                }
    //            }
    //        };
    //    }
</script>

</html>

Ayhan_huang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS, JavaScript, jQuery实现标签页切换

效果图参考：基本实现如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .out
复制链接

扫一扫