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(); }); });
您可能感興趣的文章:
- JS實現(xiàn)標簽頁切換效果
- 最簡單純JavaScript實現(xiàn)Tab標簽頁切換的方式(推薦)
- Bootstrap 最常用的JS插件系列總結(圖片輪播、標簽切換等)
- javascript實現(xiàn)不同顏色Tab標簽切換效果
- JS+DIV+CSS實現(xiàn)的經(jīng)典標簽切換效果代碼
- js實現(xiàn)的tab標簽切換效果代碼分享
- 簡單純js實現(xiàn)點擊切換TAB標簽實例
- js實現(xiàn)點擊切換TAB標簽實例
- js(JavaScript)實現(xiàn)TAB標簽切換效果的簡單實例
- JS實現(xiàn)切換標簽頁效果實例代碼
- JS實現(xiàn)的簡單標簽點擊切換功能示例
相關文章
js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07Uniapp中嵌入H5并在H5中跳轉到APP的指定頁面方法詳解
Uniapp是一款基于Vue.js框架的跨平臺開發(fā)工具,支持在一套代碼中開發(fā)出運行于各大平臺的應用程序,這篇文章主要給大家介紹了關于Uniapp中嵌入H5并在H5中跳轉到APP的指定頁面的相關資料,需要的朋友可以參考下2023-09-09