网页中tab标签切换分别用jquery和javascript源码实现

Posted 晴晴加油

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页中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()方法哦~~

你也赶快运行起来吧~~~

作者原创,转载请注明出处!

以上是关于网页中tab标签切换分别用jquery和javascript源码实现的主要内容,如果未能解决你的问题,请参考以下文章

jQuery怎么实现tab页切换效果

jquery切换tab标签例子

jquery ui中切换标签时如何刷新当前tabs下的内容

tab标签切换

JQUERY的TAB标签,我想实现5秒钟自动切换的效果,怎么做

简单实现tab标签页切换