js封裝tab標(biāo)簽頁實例分享
更新時間：2016年12月19日 12:05:03 作者：wxwx123
本篇文章主要分享了js封裝tab標(biāo)簽頁的示例代碼，具有很好的參考價值，需要的朋友一起來看下吧
話不多說，請看代碼
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
*{ padding:0; margin:0;}
.block{ display:block;}
.none{ display:none;}
#wrap,#wraps{ width:500px; height:230px; overflow:hidden; margin:50px auto;}
#tab1,#tab2{ list-style:none;}
#tab1 li,#tab2 li{ width:66px; height:28px; border:1px solid #09C; text-align:center; line-height:28px; float:left; cursor:pointer; margin-right:3px;}
#tab2 li:hover{ background:#CCC;}
#tab1 li.on,#tab2 li.on{ background:#9C3;}
#wrap div,#wraps div{ width:498px; height:198px; border:1px solid #000;}
</style>
</head>
<body>
<div id="wrap">
<ul id="tab1">
<li class="on">第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<div id="wraps">
<ul id="tab2">
<li class="on">第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
<br clear="all" />
<div class="block">第一部分</div>
<div class="none">第二部分</div>
<div class="none">第三部分</div>
</div>
<script type="text/javascript">
tab("wrap","tab1","mouseover")
tab("wraps","tab2");
function tab(wrap,navul,eve){
//tab效果封裝，目前只有兩種變換方式，一種為點擊事件click（也是默認事件），另外一種為鼠標(biāo)移過事件mouseover
var divs=document.getElementById(wrap).getElementsByTagName("div");
var lis=document.getElementById(navul).getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].indx=i;
if(eve=="click" || eve==null){
lis[i].onclick=function(){
for(i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="none";
this.className="on";
divs[this.indx].className="block";
}
}
}else if(eve=="mouseover"){
lis[i].onmouseover=function(){
for(i=0;i<lis.length;i++){
lis[i].className="";
divs[i].className="none";
this.className="on";
divs[this.indx].className="block";
}
}
}
}
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- JS控制表格隔行變色
- 原生JS操作網(wǎng)頁給p元素添加onclick事件及表格隔行變色
- javascript實現(xiàn)table表格隔行變色的方法
- 高效的表格行背景隔行變色及選定高亮的JS代碼
- javascript表格隔行變色加鼠標(biāo)移入移出及點擊效果的方法
- JavaScript實現(xiàn)的斑馬線表格效果【隔行變色】
- 純css+js寫的一個簡單的tab標(biāo)簽頁帶樣式
- 最簡單純JavaScript實現(xiàn)Tab標(biāo)簽頁切換的方式(推薦)
- js與jquery分別實現(xiàn)tab標(biāo)簽頁功能的方法
- JavaScript實現(xiàn)的原生態(tài)Tab標(biāo)簽頁功能【兼容IE6】
- JavaScript表格隔行變色和Tab標(biāo)簽頁特效示例【附j(luò)Query版】
相關(guān)文章
下面小編就為大家?guī)硪黄狫S 拼湊字符串的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細介紹了Bootstrap圖片輪播組件Carousel使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
html2canvas屬性和使用方法以及如何使用html2canvas將HTML內(nèi)容寫入Canvas生成圖片
為大家介紹一款JS截圖插件html2canvas.js， 它可以通過純JS對瀏覽器端經(jīng)行截屏,下面就為大家介紹一下html2canvas.js屬性和具體使用方法，并為大家提供了一個實例2020-01-01
這篇文章主要介紹了JavaScript中聲明全局變量三種方式的異同。變量及變量聲明是一門語言最基本的概念，初學(xué)者都會很快掌握。需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了JavaScript 防篡改對象的用法示例，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以參考下2021-04-04
本文主要介紹了JavaScript本地存儲實現(xiàn)用戶名存儲案例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
這篇文章主要為大家詳細介紹了JS實現(xiàn)彈幕小案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
JS 的應(yīng)用開發(fā)初探(mootools)
昨天在公司內(nèi)部做了一個小小的技術(shù)分享，就 js 應(yīng)用開發(fā)方面跟大家談了一點自己的心得，最近因為工作關(guān)系花在這上面的時間較多也頗有些收獲，寫在這里備忘。2009-12-12
uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接功能
這篇文章主要介紹了uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接,本文通過實例代碼給大家分享實現(xiàn)思路，代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-03-03
要慎用readonly和disabled, 指定了disabled的表單,在submit時,不會把它的值傳出去, 如下所示,有兩個text,一個是readonly一個是disabled,submit后,只能發(fā)送那個不是disabled的,注意地址欄的值. 要保存到本地,因為submit了,不然,看不到效果.2008-04-04