选项卡 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
    margin:0px;
    padding:0px;
    }
#nav{
    width:120px;
    height:392px;
    float:left;    
    }    
#nav li{
    width:120px;
    height:98px;
    border:1px #eee solid;
    text-align:center;
    line-height:100px;
    font-weight:bold;
    cursor:pointer;
    font-weight:bold;
    background:#E7E7E7;
    list-style-type:none;
    }
#nav .active{
    background:#FFF;
    }
    
#content{
    width:600px;
    height:408px;
    float:left;
    position:relative;
    }
#content ul{
    position:absolute;
    width:100%;
    bottom:7px;
    text-align:justify;
    background:#FFF;
    display:none;
    opacity:0.6;
    }            
#content ul li{
    list-style-type:none;
    display:table-cell;
    cursor:pointer;
    border:1px solid #eee;
    padding:0 20px;
    line-height:30px;
    text-align:center;
    }
#content ul.show{
    display:table !important;
    }
#content ul li.active{
    background:red;
    opacity:0.8;
    }
#content img{
    display:none;        
    }                        
</style>
<script type="text/javascript">
window.onload = function ()
{
    var arrimg = [
                    ['img/5-1.jpg','img/5-2.jpg','img/5-3.jpg'],
                    ['img/5-3.jpg','img/5-4.jpg','img/5-5.jpg','img/5-6.jpg'],
                    ['img/5-3.jpg','img/5-4.jpg','img/5-5.jpg','img/5-6.jpg','img/5-7.jpg'],
                    ['img/5-7.jpg','img/5-8.jpg','img/5-9.jpg','img/5-10.jpg']
                 ];
                 
    var oul = document.getElementById('nav');
    var ali = oul.getElementsByTagName('li');
    
    var ocontent = document.getElementById('content');
    var aul = ocontent.getElementsByTagName('ul');
    var aimg = ocontent.getElementsByTagName('img');
    var num = 0;
    
    fntab(aul[0]);
    
    for( var i = 0;i < ali.length; i++)
    {
        ali[i].index = i;
        ali[i].onclick = function ()
        {
            for( var i = 0; i < ali.length; i++ )
            {
                num = this.index;
                ali[i].className = '';
                aul[i].className = '';
                aimg[i].style.display = 'none';
            }
            this.className = 'active';
            aul[num].className = 'show';
            aimg[num].style.display = 'block';
            fntab(aul[num]);
        };
    }
    
    
    function fntab(ul)
    {
        var lia = ul.getElementsByTagName('li');
        for( var i = 0; i < lia.length; i++ )
        {
            if(lia[i].className)
            {
                aimg[num].src = arrimg[num][i];
            }
            
            lia[i].index = i;
            lia[i].onclick = function ()
            {
                for( i = 0; i < lia.length; i++)
                {
                    lia[i].className = '';
                }
                
                this.className = 'active';
                aimg[num].src = arrimg[num][this.index];
                
            }
        } 
        
    };
};
</script>
</head>

<body>
<div id="wrap">
    <ul id="nav">
        <li class="active">最热团购</li>
        <li>商城优惠</li>
        <li>名品推荐</li>
        <li>缤纷活动</li>
    </ul>
    <div id="content">
        <img style="display:block;" src="img/5-1.jpg">
        <ul class="show">
            <li class="active">最热团购Tab1</li>
            <li>最热团购Tab2</li>
            <li>最热团购Tab3</li>
        </ul>
        <img src="img/5-3.jpg">
        <ul>
            <li class="active">商城特惠Tab1</li>
            <li>商城特惠Tab2</li>
            <li>商城特惠Tab3</li>
            <li>商城特惠Tab4</li>
        </ul>
        <img src="img/5-3.jpg">
        <ul>
            <li class="active">名品推荐Tab1</li>
            <li>名品推荐Tab2</li>
            <li>名品推荐Tab3</li>
            <li>名品推荐Tab4</li>
            <li>名品推荐Tab5</li>
        </ul>
        <img src="img/5-7.jpg">
        <ul>
            <li class="active">缤纷活动Tab1</li>
            <li>缤纷活动Tab2</li>
            <li>缤纷活动Tab3</li>
            <li>缤纷活动Tab4</li>
        </ul>
    </div>
</div>
</body>
</html>

 

posted @ 2014-12-18 16:46  mayufo  阅读(178)  评论(0)    收藏  举报