tab栏的切换效果

导航栏的切换特效：

html代码如下：

<ul id="tab">
    <li class="fli">tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul>

<div id="tab_con">

    <div class="fdiv">aaaa</div>

    <div>bbbb</div>

    <div>cccc</div>

</div>

css样式代码如下：

       ul, li, div {
            padding: 0;
            margin: 0;
        }

        ul li {
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #fff;
            border: 1px #bbb solid;
            border-bottom: none;
            cursor: pointer;
        }

        ul li.fli {
            background-color: #ccc;
            color: red;
        }

        ul {
            overflow: hidden;
            zoom: 1;
            list-style-type: none;
        }

        #tab_con {
            width: 304px;
            height: 200px;
        }

        #tab_con div {
            width: 304px;
            height: 200px;
            display: none;
            border: 1px #bbb solid;
            border-top: none;
        }

        #tab_con div.fdiv {
            display: block;
            background-color: #ccc;
        }

        .tclass{
            width: 100px;
            height: 30px;
            background: #000;
        }

js代码如下：

<script type="text/javascript">

    var tabs = document.getElementById("tab").getElementsByTagName("li");
    var divs = document.getElementById("tab_con").getElementsByTagName("div");
    for (var i = 0; i < tabs.length; i++) {
        tabs[i].onclick = function () {
            change(this);
        }
    }

    function change(obj) {

        for (var i = 0; i < tabs.length; i++) {
            if (tabs[i] == obj) {
                tabs[i].className = "fli";
                divs[i].className = "fdiv";
            }
            else {
                tabs[i].className = "";
                divs[i].className = "";
            }
        }
    }

</script>