首页 > 程序开发 > web前端 > JavaScript教程 > JS 实例 >

javascript实现标签切换代码示例

2016-05-25

本文给大家分享的事tab切换的两段js,均可实现标签切换功能,大家根据自己的需求自由选择

本文给大家分享的事tab切换的两段js,均可实现标签切换功能,大家根据自己的需求自由选择

两则代码都很简单,这里就不多废话了,直接上代码

代码1,

function ntabs(thisObj,Num)
      {if(thisObj.className == "active")return;  
      var tabObj = thisObj.parentNode.id;  
      var tabList = document.getElementById(tabObj).getElementsByTagName("li");  
      for(i=0; i <tabList.length; i++)
        {if (i == Num)
          {thisObj.className = "active";  
          document.getElementById(tabObj+"_cont"+i).style.display = "block";  
          }
          else{  
            tabList[i].className = "normal";  
            document.getElementById(tabObj+"_cont"+i).style.display = "none";  
        }  
      }  
    }  

代码2,

$(document).ready(function(){

  var $tab_li = $(&#39;.tab ul li&#39;);

  $tab_li.hover(function(){

    $(this).addClass(&#39;selected&#39;).siblings().removeClass(&#39;selected&#39;);

    var index = $tab_li.index(this);

    $(&#39;div.tab_box > div&#39;).eq(index).show().siblings().hide();

  });  

});

相关文章
最新文章
热点推荐