首页>案例集

JavaScript案例9:选项卡套选项卡切换

选项卡的效果主要是自定义索引值的对应关系,只不过嵌套类的选项卡还要注意索引值的传递。

原生JavaScript完成。

1、先完成一个左右选项卡的切换。

2、封装成函数。

3、完成右边选项卡的切换,并把对应的索引值传递到函数内部,从而从数据对象中获取对应的数据。

选项卡嵌套选项卡.gif

具体效果点击查看

一、html代码

<div id="wrap">
    <ul class="tab">
    <li><a href="javascript:;">最热团购</a></li>
    <li><a href="javascript:;">商城活动</a></li>
<li><a href="javascript:;">名品推荐</a></li>
<li><a href="javascript:;">缤纷活动</a></li>
</ul>
<div class="content">
    <div class="tab-content">
    <img src="images/1/1.jpg" />
    <ul class="tablist">
    <!--<li class="active"><a href="javascript:;">天猫.家年华</a></li>
                <li><a href="javascript:;">天猫.家年华</a></li>
                <li><a href="javascript:;">天猫.家年华</a></li>
                <li><a href="javascript:;">天猫.家年华</a></li>-->
</ul>
</div>
</div>

</div>

二、css代码

*{
    box-sizing:border-box;}
body,ul{
    margin:0;
    padding:0;}
body{
    font:1em "microsoft Yahei";
    color:#333;
    background:#eee;}
li{
    list-style:none;
}
a{
    color:#333;
    text-decoration:none;}
#wrap{
    width:1050px;
    height:500px;
    overflow:hidden;
    margin:20px auto;}
.tab{
    float:left;
    width:158px;
    height:500px;}
.tab li{
    text-align:center;
    line-height:125px;
    background:#e1e1e1;
    border-bottom:1px solid #ccc;}
.tab li:last-child{
    border-bottom:none;}
.tab li.active{
    background:#fff;}
.content{
    width:892px;
    float:right;}
.tab-content{
    position:relative;}
.tablist{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    }
.tablist li{
    float:left;
    text-align:center;
    padding:10px 20px;
    background:rgba(0,0,0,0.3);
    border-right:1px solid #fff;}
.tablist li.active{
    background:rgba(243,65,140,.7);}
.tablist li:last-child{
    border-right:none;}
.tablist li a{
    color:#fff;}

三、js代码

window.onload=function(){
    var oWrap=document.getElementById("wrap");
    var oTab=oWrap.getElementsByClassName("tab")[0];
    var aLi=oTab.getElementsByTagName("li");
    var oTabContent=oWrap.getElementsByClassName("tab-content")[0];
    var oImg=oTabContent.getElementsByTagName("img")[0];
    var oUl=oTabContent.getElementsByTagName("ul")[0];
    var aList=oTabContent.getElementsByTagName("li");
    
    var data=[
    {
        'url':["images/1/1.jpg","images/1/2.jpg","images/1/3.jpg","images/1/4.jpg","images/1/5.jpg"],
        'title':["天猫.家年华","进口家居馆","厨卫狂欢节","装修.必buy","装修大额神券"]
        },
    {
        'url':["images/2/1.jpg","images/2/2.jpg","images/2/3.jpg","images/2/4.jpg"],
        'title':["罗西尼手表特惠","德式美学设计","荣耀畅玩7C","华为nova 2s"]
        },
    {
        'url':["images/3/1.jpg","images/3/2.jpg","images/3/3.jpg"],
        'title':["比亚迪宠爱礼","OPPO 新品驾到","莱克无线吸尘器"]
        },
    {
        'url':["images/4/1.jpg","images/4/2.jpg","images/4/3.jpg"],
        'title':["护肤聚划算","防晒无惧阳光","罗莱儿童家纺"]
        }
    
    ]
    
    
    var num=0;  //外层的高亮
    var num1=0;  //内层的的高亮
    
    aLi[num].className="active"; //初始化左边列表的高亮。
    fnTab(data[num].url,data[num].title);  //先初始化一次右边的内容。
    //左边标题选项卡的切换并传递自己的索引值给num。
    for(var i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onmouseover=function(){
            num=this.index;
            for(var i=0;i<aLi.length;i++){
                aLi[i].className="";
            }
            this.className="active";
            fnTab(data[num].url,data[num].title);
            }
        }
    //右边的选项卡的切换。
    function fnTab(url,title){
        var str="";
        oUl.innerHTML=""; //每次都要清空。
        //初始化内层的li和图片
        oImg.src=url[num1];
        
        for(var i=0;i<url.length;i++){
            str="<li><a href='javascript:;'>"+title[i]+"</a></li>";
            oUl.innerHTML+=str;
            aList[i].style.width=100/url.length+"%";
            }
        aList[num1].className="active";
        
        
        //鼠标经过切换图片
        for(var i=0;i<aList.length;i++){
            aList[i].index=i;
            aList[i].onmouseover=function(){
                for(var i=0;i<aList.length;i++){
                    aList[i].className="";
                    }
                this.className="active";
                
                oImg.src=url[this.index];
                }

            }
        
        }

    }

案例源代码下载地址:

链接: https://pan.baidu.com/s/1tCgqPZq8YSEO29H0bLu6Tg 提取码: g5c2 

点赞


1
保存到:

相关文章

Top