如何实现tab栏的切换效果

导航栏的切换特效：

html代码如下：

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

<p id="tab_con">

    <p class="fp">aaaa</p>

    <p>bbbb</p>

    <p>cccc</p>

</p>

css样式代码如下：

       ul, li, p {
            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 p {
            width: 304px;
            height: 200px;
            display: none;
            border: 1px #bbb solid;
            border-top: none;
        }

        #tab_con p.fp {
            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 ps = document.getElementById("tab_con").getElementsByTagName("p");
    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";
                ps[i].className = "fp";
            }
            else {
                tabs[i].className = "";
                ps[i].className = "";
            }
        }
    }

</script>

以上是如何实现tab栏的切换效果 的详细内容。更多信息请关注PHP中文网其他相关文章！