網頁中tab標籤切換分別用jquery和javascript源碼實現

//HTML佈局
<ul id="tabTitle">
    <li class="active">HTML5</li>
    <li>PHP</li>
    <li>Java</li>
</ul>
<div id="div1" style="display: block">
    HTML5
</div>
<div id="div2">
    PHP
</div>
<div id="div3">
    Java
</div>

//css樣式
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
        float: left;
        padding: 5px 10px;
        border: 1px solid #008000;
        margin: 10px;
    }
    
    div {
        width: 150px;
        height: 140px;
        border: 1px solid black;
        clear: both;
        margin-left: 10px;
        display: none;
    }
    
    .active {
        background: palegreen;
    }
</style>

//javascript源碼
<script type="text/javascript">
    window.onload = function() {
        var oUl = document.getElementById("tabTitle");
        var aLi = oUl.getElementsByTagName('li');
        var aDiv = document.getElementsByTagName('div');

        for(var i = 0; i < aLi.length; i++) {
            aLi[i].index = i;
            aLi[i].onclick = function() {
                for(var i = 0; i < aLi.length; i++) {
                    aLi[i].className = '';
                    aDiv[i].style.display = 'none';
                }
                this.className = 'active';
                aDiv[this.index].style.display = 'block';
            };
        };
    };
</script>

運行後如圖：

  

以上就是使用javascript實現的切換頁的方式嘍...

接下來使用jquery實現一樣的功能！！！

<ul id="tabTitle">
    <li class="active">HTML5</li>
    <li>PHP</li>
    <li>Java</li>
</ul>
<div id="wrap">
    <div id="div1" style="display: block">
        HTML5
    </div>
    <div id="div2">
        PHP
    </div>
    <div id="div3">
        Java
    </div>
</div>

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    li {
        list-style: none;
        float: left;
        padding: 5px 10px;
        border: 1px solid #008000;
        margin: 10px;
    }
    
    #wrap div {
        width: 150px;
        height: 140px;
        border: 1px solid black;
        clear: both;
        margin-left: 10px;
        display: none;
    }
    
    .active {
        background: palegreen;
    }
</style>

<script src="js/jquery-3.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
    $('ul li').click(function () {
        //切換標籤樣式
        $(this).addClass('active').siblings().removeClass('active');
        //切換div顯示隱藏
        $('#wrap>div').eq($(this).index()).show().siblings().hide();

        //也能夠直接寫成一句話，和上面兩句分着寫效果是同樣的
        $(this).addClass('active').siblings().removeClass('active').parent().next().children().eq($(this).index()).show().siblings().hide();
    });
});
</script>

運行後的效果和上面是同樣的。

注意：eq($(this).index()); 不要忘記這個index()方法哦~~

你也趕快運行起來吧~~~

做者原創，轉載請註明出處!