tab选项卡-优快云博客

本文介绍了一种使用HTML、CSS及JavaScript实现的Tab选项卡效果。通过简单的代码实现了选项卡切换的功能，包括设置选中状态样式及显示相应的内容区域。

第二种tab选项卡

HTML代码

<div id="tab">
    
            <div class="tab_menu">
                <ul>
                    <li class="selected"><a href="#">one</a></li>
                    <li><a href="#">two</a></li>
                    <li><a href="#">three</a></li>
                </ul>
            </div>
            
            <div class="tab_box">
                <div>one</div>
                <div class="hide">two</div>
                <div class="hide">three</div>
            </div>
        </div>

CSS代码

.tab_menu  {
    background-color:#f4f4f8;
  }
.tab_menu ul{
    height:52px;
}
.tab_menu ul li{
    float:left;
    list-style:none;
    color:#000;
    text-align:center;
    line-height:52px;
    margin-right:60px;
    font-size:14px;
}
.tab_menu ul li a{
    text-decoration:none;
}
.tab_box{
    margin-top: 42px；
}
.tab_box .hide{
    display:none;
}
.selected a{
    color:#44b5ff !important；
}

js代码

window.onload=function(){
                var tab=document.getElementById('tab');
                var tabli=tab.getElementsByTagName('li');
                var tabdiv=tab.getElementsByTagName('div')[1];
                var tabdivdiv=tabdiv.getElementsByTagName('div');
                for(var i=0;i<tabli.length;i++){
                    tabli[i].index=i;
                    tabli[i].onclick=function(){
                        for(var j=0;j<tabli.length;j++){
                            tabli[j].className='';//取消菜单样式
                            tabdivdiv[j].className='hide';//隐藏所有的tabDiv
                        }
                        tabli[this.index].className='selected';
                        tabdivdiv[this.index].className='';
                    }
                }
            }

转载于:https://www.cnblogs.com/xy-milu/p/6627189.html