用JS編寫選項卡效果

本文例項為大家分享了編寫選項卡效果的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .selectka {
            width:500px;
            height:400px;
            margin:www.cppcns.com 
auto;
            border:1px solid #09e1ff;
        }
        .left,.right{
            float:left;
            height:400px;
        }
        #menu{
            text-align: center;
            line-height: 80px;
            font-size: 20px;
            color:purple;
        }
        li{
            list-style: none;
        }
        #menu>li{
            width:100px;
            height:80px;
            border:1px dashed blueviolet;
            box-sizing: border-box;
        }
        .right{
            position: relative;
            width:399px;
            background: pink;
            margin-left:1px;
            text-align: center;
            font-size: 100px;
            line-height: 400px;

        }

        .right li{
            position: absolute;
             
width:399px;
            height:400px;
            display: none;
        }
    </style>
</head>
<body>
<div class="selectka">
    <div class="left">
        <ul id="menu">
            <li class="menulist">衣服</li>
            <li class="menulist">美妝</li>
            <li class="menulist">包包</li>
            <li class="menulist">美食</li>
            <li class="menulist">首飾</li>
        </ul>
    </div>
    <div class="right">
        <ul>
            <li class="numlist">衣服</li>
            <li class="numlist">美妝</li>
            <li class="numlist">包包</li>
            <li class="numlist" 
>美食</li>
            <li class="numlist">首飾</li>
        </ul>
    </div>
</div>
<script>
    var menu_list=document.getElementsByClassName("menulist");
    var num_list=document.getElementsByClassName("numlist");
    var moo=null;
    var yuu=null;
        for(var i=0;i<menu_list.length;i++) {
            menu_list[i].index = i;
            menu_list[i].onmouseenter = function () {
                /* console.log(this.index);*/   //this.index 為當前目標的索引值
                /* for(var k=0;k<num_list.length;k++){
                    num_list[k].style.display ="none";
                }
                num_list[this.index].style.display ="block";
            }*/
                if(yuu)yuu.style.background ="none";
                this.style.background ="yellow";
                yuu=this;
                 if(moo)moo.style.display="none";
                num_list[this.index].style.display = "block";
                moo = num_list[this.index];
        }
}
</script>
</body>
</html>

效果圖：

用JS編寫選項卡效果

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

用JS編寫選項卡效果

用JS編寫選項卡效果

js實現選項卡效果

用JS實現選項卡

js利用iframe實現選項卡效果

js開發外掛實現tab選項卡效果

用js編寫留言板

原生js實現選項卡切換

通過js製作選項卡

JS實現選項卡外掛的兩種寫法（jQuery和class）

jQuery實現tab選項卡效果

原生js實現選項卡

4.用jQuery寫選項卡

用js編寫簡單的貪吃蛇小遊戲

天貓首頁天貓超市下的選項卡(加自動輪播效果)仿寫（js加jquery實現動態效果）

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

JS面向物件程式設計實現的Tab選項卡案例詳解

js實現簡單選項卡製作

js 實現tab選項卡

選項卡原生js案列

js選項卡的簡單形式和封裝技巧淺談

用JS編寫選項卡效果

相關推薦