javascript實現(xiàn)標簽切換代碼示例

更新時間：2016年05月22日 15:30:57 作者：中研左松

本文給大家分享的事tab切換的兩段js，均可實現(xiàn)標簽切換功能，大家根據(jù)自己的需求自由選擇

兩則代碼都很簡單，這里就不多廢話了，直接上代碼

代碼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 = $('.tab ul li');

  $tab_li.hover(function(){

    $(this).addClass('selected').siblings().removeClass('selected');

    var index = $tab_li.index(this);

    $('div.tab_box > div').eq(index).show().siblings().hide();

  });  

});

您可能感興趣的文章:

用VsCode編輯TypeScript的實現(xiàn)方法
這篇文章主要介紹了用VsCode編輯TypeScript的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-05-05
基于wordpress的ajax寫法詳解
下面小編就為大家分享一篇基于wordpress的ajax寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
給應用部分的js代碼設定一個統(tǒng)一的入口
javascript是種腳本語言，瀏覽器下載到哪兒就會執(zhí)行到哪兒，下面為大家介紹下，如何給應用部分的js代碼一個統(tǒng)一的入口
2014-06-06
JavaScript常用數(shù)組去重實戰(zhàn)源碼
本文給大家分享js常用8種數(shù)組去重實戰(zhàn)源碼，針對每種方法通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧
2021-07-07
webpack 單獨打包指定JS文件的方法
下面小編就為大家分享一篇webpack 單獨打包指定JS文件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
學習javascript面向?qū)ο?掌握創(chuàng)建對象的9種方式
這篇文章主要為大家介紹了創(chuàng)建對象的9種方式，幫助大家更好地學習javascript面向?qū)ο?，感興趣的小伙伴們可以參考一下
2016-01-01
利用JS實現(xiàn)文字的聚合動畫效果
這篇文章主要給大家介紹了利用JS如何實現(xiàn)文字的聚合動畫效果，實現(xiàn)的效果非常不錯，類似粒子動畫的效果，有需要的朋友可以參考借鑒，下面來一起看看吧。
2017-01-01
微信小程序?qū)崿F(xiàn)瀑布流分頁滾動加載
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)瀑布流分頁滾動加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09
Js獲取單選框radio的幾種方式
這篇文章主要介紹了Js獲取單選框radio的幾種方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
js實現(xiàn)無刷新監(jiān)聽URL的變化示例代碼詳解
這篇文章主要介紹了js如何無刷新監(jiān)聽URL的變化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2020-06-06