tab切换

sclience_kang

于 2020-07-26 19:52:00 发布

阅读量109

点赞数

文章标签： js

本文链接：https://blog.csdn.net/sclience_kang/article/details/107598471

版权

<!doctype html>
<html>

<head>
    <title>新浪tab切换</title>
    <meta charset="utf-8">
    <style>
        body,
        ul,
        li,
        img,
        div {
            padding: 0;
            margin: 0;
        }

        /* 里面的图片是360*230 */
        .tabDiv {
            width: 360px;
            height: 260px;
            /* border: 1px solid black; */
            margin: 30px;
        }

        .tabDiv>ul {
            list-style: none;
            height: 30px;
            background: #F8F8F8;
            font-size: 14px;
            line-height: 30px;
            user-select: none;
            /* box-sizing: border-box; */
        }

        .tabDiv li {
            display: inline-block;
            padding: 0 15px;
            cursor: pointer;
            /* box-sizing: border-box; */
        }

        /* .tabDiv li:hover{
                background: white;
                border-top: 3px solid orangered;
            } */
        .tabDiv li.selected {
            background: white;
            border-top: 3px solid orangered;
            color: orangered;
        }

        .contentDiv div {
            display: none;
        }

        .contentDiv div.show {
            display: block;
        }
    </style>
</head>

<body>
    <div class="tabDiv" id="tabDiv">
        <!-- 我们使用ul和li来表示可以切换的tab标签 -->
        <ul>
            <li class="selected">图片</li>
            <li>专栏</li>
            <li>热点</li>
        </ul>

        <!-- 我们定义一个 contentDiv,这个contentDIv相当于用来实现对应内容的窗口-->
        <!-- 在contendDiv里面定义三个子div,然后给其添加内容 -->
        <div class="contentDiv" id="contentDiv">
            <div class="show"><img src="img/tupian.png" alt=""></div>
            <div><img src="img/zhuanlan.png" alt=""></div>
            <div><img src="img/redian.png" alt=""></div>
        </div>
    </div>
    <script>
        var n;
        // 鼠标移入哪个li让下边对应的div的类名改为show
        // 获取到ul的元素节点
        var ulEle=document.getElementsByTagName("ul")[0];
        // 获取到所有li的元素节点
        var lis=document.getElementsByTagName("li");
        // 获取到显示区的div的节点
        var showDivs=document.querySelectorAll("#contentDiv div");
        console.log(showDivs);
        // 添加事件委派给ul
        ulEle.onmouseover=function(e){
            e=e||window.event;
            var target=e.target||e.scrElement;
            if(target.nodeName.toLowerCase()==="li"){
                // 获取到鼠标移入li时li的下标
                var liIndex=getIndex(lis,target);//参数是 这个列表和当前li的节点
                console.log(liIndex);
                changeDivClassName(liIndex);
                // 给指定的li添加指定的类  其他的li取消该效果
                changeLiClassName(liIndex);
            }
        }
        // 获取对应的节点对象下标的函数
        function getIndex(list,n){
            var index;
            for(var i=0;i<lis.length;i++){
                if(lis[i]===n){
                    index=i;
                }
            }
            return index;
        }
        //将li对应的div的类名修改的函数  show
        function changeDivClassName(index){
            for(var i=0;i<showDivs.length;i++){
                if(i===index){
                    showDivs[i].className="show";
                }
                else{
                    showDivs[i].className="";
                }
            }
        }
          //将li对应的类名修改的函数 selected  取消其他元素的类名
          function changeLiClassName(index){
            for(var i=0;i<showDivs.length;i++){
                if(i===index){
                    lis[i].className="selected";
                }
                else{
                    lis[i].className="";
                }
            }
        }
        
    </script>
</body>

</html>

sclience_kang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tab切换

<!doctype html><html><head> <title>新浪tab切换</title> <meta charset="utf-8"> <style> body, ul, li, img, div { padding: 0; margin: 0;
复制链接

扫一扫