結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項卡(jquery版和原生JS版)
更新時間：2010年08月13日 23:27:54 作者：
日常項目中常用到的,用jQuery和原生JS分別寫了一個. 兩種寫法均實現(xiàn)了結(jié)構(gòu)/表現(xiàn)/行為的完全分離.當然,稍作修改,可以在同一個頁面中應(yīng)用于多個選項卡.
關(guān)于思路,和常規(guī)選項卡思路一樣.點擊選項菜單,突出顯示,并顯示對應(yīng)的選項.本文實例中主要是通過判斷點擊菜單在菜單列表中的索引位置來顯示或隱藏選項區(qū).原生js還有很多種實現(xiàn)方法(藍色理想中搜索),為了與jQ版思路保持一致,本文實例用的是循環(huán)判斷. 詳見注釋.
另有幾點說明:
1. 通過本文DEMO演示,可以很明顯的看到原生JS的window.onload=function(){…}與jQuery的$(document).ready(function(){…});的區(qū)別,這也是我為什么不用樣式定義初始狀態(tài)下隱藏第二三個顯示區(qū)的原因;
2. 本文只是選項卡一個原型實現(xiàn),若要用于同一頁面多個選項卡,變量已集中到函數(shù)頭部,可自行封裝成函數(shù);
3. 請不要問如何實現(xiàn)更酷很炫的效果,請自已思考添加效果;
4. 不希望大家用這個效果時只是機械的復(fù)制粘貼,思考加實踐,然后消化成自己的.
查看演示:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
//jQ版本
$(function(){
var _tab=$('ul.tabnav>li');//獲取選項卡導(dǎo)航
var _box=$('.tabbox div');//獲取內(nèi)容切換區(qū)
var _hover='hover';//當前點擊顯示的樣式
var _index;//索引值
_tab.eq(0).addClass(_hover);//第一個導(dǎo)航高亮顯示
_tab.click(function(){
_index=_tab.index(this);//獲取當前點擊的索引值
$(this).addClass(_hover).siblings().removeClass(_hover);//當前點擊高亮顯示
_box.eq(_index).show().siblings().hide();//通過索引值讓對應(yīng)的選項內(nèi)容區(qū)顯示
}).eq(0).click();
});
//原生JS版本
window.onload=function(){
var tabnav=document.getElementById('tabnav');
var list=tabnav.getElementsByTagName('li');
var tabbox=document.getElementById('tabbox');
var divs=tabbox.getElementsByTagName('div');
var hover='hover';//當前點擊顯示的樣式
var indexValue=function(self,obj){//獲取索引值的函數(shù),通過它獲取當前點擊在導(dǎo)航中的索引位置
for(var i=0;i<obj.length;i++){
if(obj[i]==self) return i;
}
};
var index;
list[0].className=hover;//第一個默認高亮,建議在頁面中直接定義
for(var k=1;k<divs.length;k++){//我為了省事,用一個for循環(huán)定義默認顯示第一個切換區(qū)塊,其他隱藏.這個最好用CSS定義,能避免頁面加載時它全部顯示出來.
divs[k].style.display='none';
}
for(var l=0;l<list.length;l++){//點擊事件
list[l].onclick=function(){
index=indexValue(this,list);//利用前面定義的indexValue函數(shù)取當前點擊在選項導(dǎo)航中的索引值,
for(var m=0;m<list.length;m++){
list[m].className= (m==index) ? hover : '';//高亮顯示點擊項并移除其他項高亮
}
for(var n=0;n<divs.length;n++){
divs[n].style.display= (n==index) ? 'block' : 'none';//顯示點擊對應(yīng)的選項區(qū),隱藏其他
}
}
}
}
另有幾點說明:
1. 通過本文DEMO演示,可以很明顯的看到原生JS的window.onload=function(){…}與jQuery的$(document).ready(function(){…});的區(qū)別,這也是我為什么不用樣式定義初始狀態(tài)下隱藏第二三個顯示區(qū)的原因;
2. 本文只是選項卡一個原型實現(xiàn),若要用于同一頁面多個選項卡,變量已集中到函數(shù)頭部,可自行封裝成函數(shù);
3. 請不要問如何實現(xiàn)更酷很炫的效果,請自已思考添加效果;
4. 不希望大家用這個效果時只是機械的復(fù)制粘貼,思考加實踐,然后消化成自己的.
查看演示:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
核心代碼:
復(fù)制代碼 代碼如下:
//jQ版本
$(function(){
var _tab=$('ul.tabnav>li');//獲取選項卡導(dǎo)航
var _box=$('.tabbox div');//獲取內(nèi)容切換區(qū)
var _hover='hover';//當前點擊顯示的樣式
var _index;//索引值
_tab.eq(0).addClass(_hover);//第一個導(dǎo)航高亮顯示
_tab.click(function(){
_index=_tab.index(this);//獲取當前點擊的索引值
$(this).addClass(_hover).siblings().removeClass(_hover);//當前點擊高亮顯示
_box.eq(_index).show().siblings().hide();//通過索引值讓對應(yīng)的選項內(nèi)容區(qū)顯示
}).eq(0).click();
});
//原生JS版本
復(fù)制代碼 代碼如下:
window.onload=function(){
var tabnav=document.getElementById('tabnav');
var list=tabnav.getElementsByTagName('li');
var tabbox=document.getElementById('tabbox');
var divs=tabbox.getElementsByTagName('div');
var hover='hover';//當前點擊顯示的樣式
var indexValue=function(self,obj){//獲取索引值的函數(shù),通過它獲取當前點擊在導(dǎo)航中的索引位置
for(var i=0;i<obj.length;i++){
if(obj[i]==self) return i;
}
};
var index;
list[0].className=hover;//第一個默認高亮,建議在頁面中直接定義
for(var k=1;k<divs.length;k++){//我為了省事,用一個for循環(huán)定義默認顯示第一個切換區(qū)塊,其他隱藏.這個最好用CSS定義,能避免頁面加載時它全部顯示出來.
divs[k].style.display='none';
}
for(var l=0;l<list.length;l++){//點擊事件
list[l].onclick=function(){
index=indexValue(this,list);//利用前面定義的indexValue函數(shù)取當前點擊在選項導(dǎo)航中的索引值,
for(var m=0;m<list.length;m++){
list[m].className= (m==index) ? hover : '';//高亮顯示點擊項并移除其他項高亮
}
for(var n=0;n<divs.length;n++){
divs[n].style.display= (n==index) ? 'block' : 'none';//顯示點擊對應(yīng)的選項區(qū),隱藏其他
}
}
}
}
相關(guān)文章
CSS3 media queries結(jié)合jQuery實現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要為大家詳細介紹了CSS3 media queries結(jié)合jQuery實現(xiàn)響應(yīng)式導(dǎo)航,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
jQuery基本選擇器和層次選擇器學(xué)習(xí)使用
這篇文章主要介紹了jQuery基本選擇器和層次選擇器的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
jquery.tagsinput.js實現(xiàn)記錄checkbox勾選的順序
這篇文章主要為大家詳細介紹了jquery.tagsinput.js實現(xiàn)記錄checkbox勾選的順序，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
解析jquery easyui tree異步加載子節(jié)點問題
本篇文章主要介紹解析jquery easyui tree異步加載子節(jié)點問題，easyui中的樹可以從標記中建立，也可以通過指定一個URL屬性讀取數(shù)據(jù)建立，有興趣的可以了解一下。2017-03-03
這篇文章主要介紹了JQuery實現(xiàn)折疊式菜單的詳細代碼,本文通過實例代碼通過兩種風(fēng)格給大家詳細介紹，需要的朋友可以參考下2020-06-06
淺談jquery采用attr修改form表單enctype不起作用的問題
下面小編就為大家?guī)硪黄獪\談jquery采用attr修改form表單enctype不起作用的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
這篇文章主要介紹了基于jQuery實現(xiàn)的無刷新表格分頁方法,結(jié)合完整實例形式較為詳細的分析了jQuery實現(xiàn)無刷新表格分頁的具體步驟與相關(guān)實現(xiàn)代碼,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了jquery驗證郵箱格式并顯示提交按鈕，只有輸入email地址正確才顯示提交按鈕演示，感興趣的小伙伴們可以參考一下2015-11-11
jquery輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨query輸入數(shù)字隨機抽獎特效的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
下面是jquery比較常用的一些操作實現(xiàn)方式。2009-02-02