孙肖宁

鼠标经过tab栏的时候,下方内容发生改变
描述:鼠标经过上方的tab栏,tab栏的底色发生改变,tab栏下方的内容发生改变实现方式:当鼠标经过tab栏的时候...
扫描右侧二维码阅读全文
29
2018/03

鼠标经过tab栏的时候,下方内容发生改变

描述:鼠标经过上方的tab栏,tab栏的底色发生改变,tab栏下方的内容发生改变
实现方式:当鼠标经过tab栏的时候,触发一个javascript的经过的事件,该事件是的tab栏所有的标签的className属性发生变化,使得所有的标签都失去原有的特殊属性,下方的span标签同样失去同样的特殊属性,然后给经过时的标签与对应的span标签添加特殊的属性。
实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab栏的切换</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #ccc;
        margin: 100px auto;
        overflow: hidden;
    }
    ul {
        width: 600px;
        height: 40px;
        margin-left: -1px;
        list-style: none;
    }
    li {
        float: left;
        width: 101px;
        height: 40px;
        text-align: center;
        font: 600 18px/40px "simsun";
        background-color: #dbffdd;
        cursor: pointer;
    }
    span {
        display: none;
        width: 500px;
        height: 360px;
        background-color: #a2a5ff;
        text-align: center;
        font: 700 150px/360px "simsun";
    }
    .show {
        display: block;
    }
    .current {
        background-color: #a2a5ff;
    }
</style>
<body>
     <div class="box">
         <ul>
             <li class="current">1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
         </ul>
         <span class="show">1</span>
         <span>2</span>
         <span>3</span>
         <span>4</span>
         <span>5</span>
     </div>
</body>
</html>
<script>
    //方式1
    /*var boxArr = document.getElementsByClassName("box");
    for(var i = 0; i<boxArr.length;i++){
        fn(boxArr[i]);
    }
    function fn(ele){
        var liArr = ele.getElementsByTagName("li");
        var spanArr = ele.getElementsByTagName("span");
        for (var i = 0;i<liArr.length;i++){
            liArr[i].index = i;
            liArr[i].onmouseover = function () {
                for (var j = 0;j<liArr.length;j++) {
                    liArr[j].className="";
                    spanArr[j].className="";
                }
                this.className = "current";
                spanArr[this.index].className="show";
            }
        }
    }*/
    //方式2
    var boxArr = document.getElementsByClassName("box");
    for (var i = 0;i<boxArr.length;i++){
        fn(boxArr[i]);
    }
    function fn(ele) {
        var liArr = ele.getElementsByTagName("li");
        var spanArr = ele.getElementsByTagName("span");
        for (var i = 0 ;i<liArr.length;i++){
            liArr[i].setAttribute("index",i);
            liArr[i].onmouseover = function () {
                for (var j = 0;j<liArr.length;j++){
                    liArr[j].removeAttribute("class");
                    spanArr[j].removeAttribute("class");
                }
                this.setAttribute("class","current");
                spanArr[this.getAttribute("index")].setAttribute("class","show");
            }
        }
    }
</script>
Last modification:March 29th, 2018 at 08:43 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment