Tab选项卡

布局样式：

<style type="text/css">
        *{margin: 0px;padding:0px; font-size:12px; text-decoration: none;}  //整体页面样式
        #container{width: 412px;margin: 0px auto;}   //容器的样式
        /*容器居中显示*/
        ul li{list-style-type: none;}  //祛除页面上显示的标记
        #nav_tab{width: 100%;height: 26px;}
        #nav_tab li{float: left; width: 98px;height: 26px;padding-right: 5px;}
        #nav_tab li a{display:block;width: 100%;height: 100%;text-align:center;line-height:26px;}
        .curr_nav a{color: #00f;background: url("../images/btn1.png") no-repeat 0 0;}
        .nav_link a{ color: #333; background: url("../images/btn2.png") no-repeat 0 0;}
        #nav_down{height: 100px;text-align: left;}
        .dis{display: block;}
        .undis{display: none;}
        img{ width:412px; height:200px}
    </style>

 

js控制：

<script type="text/javascript">
        window.onload = function() {
            var subs = document.getElementById("nav_down").getElementsByTagName("div");  //查找nav_down标记下的所有DIV（数组）
            var lis = document.getElementsByTagName("li");                //查找所有的li元素
            for (var i = 0; i < subs.length; i++) {
                if (i == 0) {
                    subs[i].className = "dis";                         //如果当前元素下表恒等于0，则修显示当前的元素下对应的DIV
                }
                else {
                    subs[i].className = "undis";                    //其他的div 隐藏掉
                }
            }
            for (var i = 0; i < lis.length; i++) {
                lis[i].onmouseover = function() {
                    var index = this.id;                       //根据id找到显示的下标
                    for (var i = 0; i < subs.length; i++) {
                        if (i == index) {                     //如果当前下标恒等于0
                            lis[index].className = "curr_nav";            //给当前的TAB动态添加class
                            subs[index].className = "dis";                 //给当前TAB对应的div
                        }
                        else {
                            lis[i].className = "nav_link";       //其他元素隐藏掉
                            subs[i].className = "undis";
                        }
                    }
                }
            }
        }
    </script>

页面 html：

 <div id="container">
        <ul id="nav_tab">
            <li class="curr_nav" id="0"><a href="#">春</a></li>
            <li class="nav_link" id="1"><a href="#">夏</a></li>
            <li class="nav_link" id="2"><a href="#">秋</a></li>
            <li class="nav_link" id="3"><a href="#">冬</a></li>
        </ul>
        <div id="nav_down">
            <div>
                <img src="../images/春.jpg" /></div>
            <div>
                <img src="../images/夏.jpg" /></div>
            <div>
                <img src="../images/秋.jpg" /></div>
            <div>
                <img src="../images/冬.jpg" /></div>
        </div>
    </div>

转载于:https://www.cnblogs.com/fengmingming/p/4210968.html