結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)_jquery
來(lái)源：懂視網(wǎng)
責(zé)編：小采
時(shí)間：2020-11-27 20:54:37
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)_jquery
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)_jquery:關(guān)于思路,和常規(guī)選項(xiàng)卡思路一樣.點(diǎn)擊選項(xiàng)菜單,突出顯示,并顯示對(duì)應(yīng)的選項(xiàng).本文實(shí)例中主要是通過(guò)判斷點(diǎn)擊菜單在菜單列表中的索引位置來(lái)顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷. 詳見(jiàn)注釋
導(dǎo)讀結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)_jquery:關(guān)于思路,和常規(guī)選項(xiàng)卡思路一樣.點(diǎn)擊選項(xiàng)菜單,突出顯示,并顯示對(duì)應(yīng)的選項(xiàng).本文實(shí)例中主要是通過(guò)判斷點(diǎn)擊菜單在菜單列表中的索引位置來(lái)顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷. 詳見(jiàn)注釋
關(guān)于思路,和常規(guī)選項(xiàng)卡思路一樣.點(diǎn)擊選項(xiàng)菜單,突出顯示,并顯示對(duì)應(yīng)的選項(xiàng).本文實(shí)例中主要是通過(guò)判斷點(diǎn)擊菜單在菜單列表中的索引位置來(lái)顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷. 詳見(jiàn)注釋.
另有幾點(diǎn)說(shuō)明:
1. 通過(guò)本文DEMO演示,可以很明顯的看到原生JS的window.onload=function(){…}與jQuery的$(document).ready(function(){…});的區(qū)別,這也是我為什么不用樣式定義初始狀態(tài)下隱藏第二三個(gè)顯示區(qū)的原因;
2. 本文只是選項(xiàng)卡一個(gè)原型實(shí)現(xiàn),若要用于同一頁(yè)面多個(gè)選項(xiàng)卡,變量已集中到函數(shù)頭部,可自行封裝成函數(shù);
3. 請(qǐng)不要問(wèn)如何實(shí)現(xiàn)更酷很炫的效果,請(qǐng)自已思考添加效果;
4. 不希望大家用這個(gè)效果時(shí)只是機(jī)械的復(fù)制粘貼,思考加實(shí)踐,然后消化成自己的.
查看演示:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
核心代碼:
代碼如下:
//jQ版本
$(function(){
var _tab=$('ul.tabnav>li');//獲取選項(xiàng)卡導(dǎo)航
var _box=$('.tabbox div');//獲取內(nèi)容切換區(qū)
var _hover='hover';//當(dāng)前點(diǎn)擊顯示的樣式
var _index;//索引值
_tab.eq(0).addClass(_hover);//第一個(gè)導(dǎo)航高亮顯示
_tab.click(function(){
_index=_tab.index(this);//獲取當(dāng)前點(diǎn)擊的索引值
$(this).addClass(_hover).siblings().removeClass(_hover);//當(dāng)前點(diǎn)擊高亮顯示
_box.eq(_index).show().siblings().hide();//通過(guò)索引值讓對(duì)應(yīng)的選項(xià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';//當(dāng)前點(diǎn)擊顯示的樣式
var indexValue=function(self,obj){//獲取索引值的函數(shù),通過(guò)它獲取當(dāng)前點(diǎn)擊在導(dǎo)航中的索引位置
for(var i=0;i
if(obj[i]==self) return i;
}
};
var index;
list[0].className=hover;//第一個(gè)默認(rèn)高亮,建議在頁(yè)面中直接定義
for(var k=1;kdivs[k].style.display='none';
}
for(var l=0;llist[l].onclick=function(){
index=indexValue(this,list);//利用前面定義的indexValue函數(shù)取當(dāng)前點(diǎn)擊在選項(xiàng)導(dǎo)航中的索引值,
for(var m=0;mlist[m].className= (m==index) ? hover : '';//高亮顯示點(diǎn)擊項(xiàng)并移除其他項(xiàng)高亮
}
for(var n=0;ndivs[n].style.display= (n==index) ? 'block' : 'none';//顯示點(diǎn)擊對(duì)應(yīng)的選項(xiàng)區(qū),隱藏其他
}
}
}
}
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)_jquery
結(jié)構(gòu)/表現(xiàn)/行為完全分離的選項(xiàng)卡(jquery版和原生JS版)_jquery:關(guān)于思路,和常規(guī)選項(xiàng)卡思路一樣.點(diǎn)擊選項(xiàng)菜單,突出顯示,并顯示對(duì)應(yīng)的選項(xiàng).本文實(shí)例中主要是通過(guò)判斷點(diǎn)擊菜單在菜單列表中的索引位置來(lái)顯示或隱藏選項(xiàng)區(qū).原生js還有很多種實(shí)現(xiàn)方法(藍(lán)色理想中搜索),為了與jQ版思路保持一致,本文實(shí)例用的是循環(huán)判斷. 詳見(jiàn)注釋
