tab切换 js制作 index和this的应用

Posted 2020-10-12 @binglong180

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了tab切换 js制作 index和this的应用相关的知识，希望对你有一定的参考价值。

这个问题刚开始的时候挺纠结的，怎么从getelementsByTagName（）获得，用index和this即可做到，还有的应用到数组的遍历具体看下面的代码吧！

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>TAB切换</title>
    <link href="css/tab.css" rel="stylesheet">
</head>

<body>
<div class="div_bg">
    <ul id="bg">
        <li id="bg1" class="nobg" onmouseover="tab()"><a class="white">小说</a></li>
        <li id="bg2" class="nobg" onmouseover="tab()"><a class="white">非小说</a></li>
        <li id="bg3" class="nobg"><a class="white">少儿</a></li>
    </ul>
    <div id="book1">
        <a href="#" target=_blank>1.时间旅行者的妻子</a><br>
        <a href="#" target=_blank>2.女心理师（下）</a><br>
        <a href="#" target=_blank>3.鬼吹灯之精绝古城</a><br>
        <a href="#" target=_blank>4.女心理师（上）</a><br>
        <a href="#" target=_blank>5.小时候</a><br>
        <a href="#" target=_blank>6.追风筝的人</a><br>
        <a href="#" target=_blank>7.盗墓笔记2</a><br>
        <a href="#" target=_blank>8.输赢</a>
    </div>
    <div id="book2">
        <a href="#" target=_blank>1.人生若只如初见</a><br>
        <a href="#" target=_blank>2.高效能人士的七个..</a><br>
        <a href="#" target=_blank>3.求医不如求己</a><br>
        <a href="#" target=_blank>4.人体使用手册</a><br>
        <a href="#" target=_blank>5.孩子，把你的手给我</a><br>
        <a href="#" target=_blank>6.别笑！我是英文单词书</a><br>
        <a href="#" target=_blank>7.人体经络使用手册</a><br>
        <a href="#" target=_blank>8.股市稳赚</a>
    </div>
    <div id="book3">
        <a href="#" target=_blank>1.斯凯瑞金色童书?..</a><br>
        <a href="#" target=_blank>2.哈利?波特与“混..</a><br>
        <a href="#" target=_blank>3.不一样的卡梅拉（..</a><br>
        <a href="#" target=_blank>4.它们是怎么来的</a><br>
        <a href="#" target=_blank>5.五?三班的坏小子..</a><br>
        <a href="#" target=_blank>6.男生日记</a><br>
        <a href="#" target=_blank>7.哈利?波特与魔法石</a><br>
        <a href="#" target=_blank>8.噼里啪啦丛书(全7册)</a>
    </div>
</div>
</body>
<script type="text/javascript">
    window.onload=function(){
            var  list = document.getElementsByTagName("li");
            for(var i=0;i<list.length;i++){
                list[i].index=i;
                list[i].onmousemove=function(){
　　　　　　　　　　　　//获得当前元素的下表
                    var index = this.index;
　　　　　　　　　　　　//给每一个元素恢复原始
                    for(var i=0;i<3;i++){
                        document.getElementById("bg"+(i+1)).className="nobg";
                        document.getElementById("book"+(i+1)).style.display="none";
                    }
　　　　　　　　　　　　//对选择的元素添加样式
                    document.getElementById("bg"+(index+1)).className="bg";
                    document.getElementById("book"+(index+1)).style.display="block";
                }
            }

        }
</script>
</html>

css代码

*{
    margin:0;
    padding: 0;
    font-family: "Arial", "微软雅黑";
    font-size: 12px;
    line-height: 23px;
}
ul,li{list-style: none;}
li{float: left; margin-right: 1px;}
.div_bg{
    background-image:url(../images/bg.jpg);
    background-repeat:no-repeat;
    width:169px;
    height:290px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding: 50px 0 0 15px;
    position: relative;
}
.div_bg div{
    clear: both; padding-top: 10px;}
.white{font-size:12px;
    color:#FFFFFF;
    padding-top:2px;
    cursor:pointer;
}
.white:hover{font-size:12px;
    color:#FFFFFF;
    padding-top:2px;
    cursor:pointer;
}
a {
    color: #06329b;text-decoration: none;line-height:24px;
}
a:hover {
    color: #cc0000;text-decoration: none;line-height:24px;
}
.bg{background-image:url(../images/menu1.gif);
    background-repeat:no-repeat;
    height:23px;
    width:47px;
    text-align:center;}

.nobg{background-image:url(../images/menu2.gif);
    background-repeat:no-repeat;
    height:23px;
    width:47px;
    text-align:center;
}
#book2,#book3{
    display: none;
}
.div_bg div{
    position: absolute;
    top: 80px;
}

以上是关于tab切换 js制作 index和this的应用的主要内容，如果未能解决你的问题，请参考以下文章

通过案例详解点击事件获取li的index，并切换对应的图片，排他思想，闭包，bind，let，jquery简单应用，简单的tab栏制作-初学者html+css+js练习demo