結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery

來源：懂視網責編：小采時間：2020-11-27 20:54:37

結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery

結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery:關于思路,和常規選項卡思路一樣.點擊選項菜單,突出顯示,并顯示對應的選項.本文實例中主要是通過判斷點擊菜單在菜單列表中的索引位置來顯示或隱藏選項區.原生js還有很多種實現方法(藍色理想中搜索),為了與jQ版思路保持一致,本文實例用的是循環判斷. 詳見注釋

推薦度：

點擊下載本文 文檔為doc格式

導讀結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery:關于思路,和常規選項卡思路一樣.點擊選項菜單,突出顯示,并顯示對應的選項.本文實例中主要是通過判斷點擊菜單在菜單列表中的索引位置來顯示或隱藏選項區.原生js還有很多種實現方法(藍色理想中搜索),為了與jQ版思路保持一致,本文實例用的是循環判斷. 詳見注釋

關于思路,和常規選項卡思路一樣.點擊選項菜單,突出顯示,并顯示對應的選項.本文實例中主要是通過判斷點擊菜單在菜單列表中的索引位置來顯示或隱藏選項區.原生js還有很多種實現方法(藍色理想中搜索),為了與jQ版思路保持一致,本文實例用的是循環判斷. 詳見注釋.
另有幾點說明:
1. 通過本文DEMO演示,可以很明顯的看到原生JS的window.onload=function(){…}與jQuery的$(document).ready(function(){…});的區別,這也是我為什么不用樣式定義初始狀態下隱藏第二三個顯示區的原因;
2. 本文只是選項卡一個原型實現,若要用于同一頁面多個選項卡,變量已集中到函數頭部,可自行封裝成函數;
3. 請不要問如何實現更酷很炫的效果,請自已思考添加效果;
4. 不希望大家用這個效果時只是機械的復制粘貼,思考加實踐,然后消化成自己的.
查看演示:

<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="http://www.alabama37th.com/"/> 
<meta name="keywords" content="Mr.Think,前端開發,WEB前端,前端技術,前端開發,WEB前端開發,用戶體驗,網站策劃,網站優化,青鳥,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鳥的博客,PHP愛好者,Bluebirdsky" /> 
<meta name="description" content="Mr.Think的博客,中文網名青鳥,現專注于WEB前端開發,同時也是一位PHP的愛好者.愛思考,有點代碼潔癖,生吃過螃蟹腿,喜好肉食.這里是我記錄知識與生活瑣事的地方." /> 
 
 
<title>結構/表現/行為完全分離的選項卡(jQ版和原生JS版)@Mr.Think</title> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></ script> 
<style> 
/*reset css*/ 
body{font-size:0.8em;letter-spacing:1px;font-family:"Microsoft YaHei"; line-height:1.8em} 
div,h2,p,ul,li{margin:0;padding:0} 
h1{font-size:1em; font-weight:normal;} 
h1 a{background:#047; padding:2px 3px; color:#fff; text-decoration:none;} 
h1 a:hover{background:#a40000; color:#fff; text-decoration:underline} 
h3{color:#888; font-weight:bold;font-size:1em; margin:1em auto; position:relative} 
/*demo css*/ 
h2{width:120px; height:25px;background:#a40000;font-size:12px; color:#fff;text-align:center; ;line-height:25px;margin:30px 0 10px} 
/*jQ版本*/ 
ul.tabnav{width:500px;height:25px;margin-left:100px} 
ul.tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
ul.tabnav li.hover{background:#047} 
.tabbox{width:500px;height:100%;border:2px solid #047} 
.tabbox div{margin:10px;line-height:20px} 
/*原生js版本(樣式與jQ版本一樣,只是命名不同)*/ 
ul#tabnav{width:500px;height:25px;margin-left:100px} 
ul#tabnav li{background:#baf;color:#fff;line-height:25px;display:block;float:left;margin:0 10px;padding:0 5px;cursor:pointer} 
ul#tabnav li.hover{background:#047} 
#tabbox{width:500px;height:100%;border:2px solid #047} 
#tabbox div{margin:10px;line-height:20px} 
</style> 
<script> 
/******************************* 
* @author Mr.Think 
* @author blog http://mrthink.net/ 
* @2010.08.10 
* @可自由轉載及使用,但請注明版權歸屬 
*******************************/ 
//jQ版本 
$(function(){ 
var _tab=$('ul.tabnav>li');//獲取選項卡導航 
var _box=$('.tabbox div');//獲取內容切換區 
var _hover='hover';//當前點擊顯示的樣式 
var _index;//索引值 
_tab.eq(0).addClass(_hover);//第一個導航高亮顯示 
_tab.click(function(){ 
_index=_tab.index(this);//獲取當前點擊的索引值 
$(this).addClass(_hover).siblings().removeClass(_hover);//當前點擊高亮顯示 
_box.eq(_index).show().siblings().hide();//通過索引值讓對應的選項內容區顯示 
}).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){//獲取索引值的函數,通過它獲取當前點擊在導航中的索引位置 
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 
</head> 
<body> 
<h2>Mr.Think的個人博客
@專注前端技術,熱愛PHP,崇尚簡單生活.</h2> 
<h3>返回文章頁:結構/表現/行為完全分離的選項卡(jQ版和原生JS版)@Mr.Think</h3> 
 
 
<h2>基于jQ版本</h2> 
 
<li>jQuery技術</li> 
<li>CSS技術</li> 
<li>xhtml技術</li> 
 
 
jQuery技術在這里顯示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/1.jpg" /> 
CSS技術在這里顯示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/2.jpg" /> 
xhtml技術在這里顯示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/3.png" /> 
 
 
<h2>原生JS版本</h2> 
 
<li>jQuery技術</li> 
<li>CSS技術</li> 
<li>xhtml技術</li> 
 
 
jQuery技術在這里顯示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/1.jpg" /> 
CSS技術在這里顯示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/2.jpg" /> 
xhtml技術在這里顯示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/3.png" /> 
 
 
</body> 
</html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]
核心代碼:
代碼如下:
//jQ版本
$(function(){
var _tab=$('ul.tabnav>li');//獲取選項卡導航
var _box=$('.tabbox div');//獲取內容切換區
var _hover='hover';//當前點擊顯示的樣式
var _index;//索引值
_tab.eq(0).addClass(_hover);//第一個導航高亮顯示
_tab.click(function(){
_index=_tab.index(this);//獲取當前點擊的索引值
$(this).addClass(_hover).siblings().removeClass(_hover);//當前點擊高亮顯示
_box.eq(_index).show().siblings().hide();//通過索引值讓對應的選項內容區顯示
}).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){//獲取索引值的函數,通過它獲取當前點擊在導航中的索引位置
for(var i=0;iif(obj[i]==self) return i;
}
};
var index;
list[0].className=hover;//第一個默認高亮,建議在頁面中直接定義
for(var k=1;kdivs[k].style.display='none';
}
for(var l=0;llist[l].onclick=function(){
index=indexValue(this,list);//利用前面定義的indexValue函數取當前點擊在選項導航中的索引值,
for(var m=0;mlist[m].className= (m==index) ? hover : '';//高亮顯示點擊項并移除其他項高亮
}
for(var n=0;ndivs[n].style.display= (n==index) ? 'block' : 'none';//顯示點擊對應的選項區,隱藏其他
}
}
}
}

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery

推薦度：

點擊下載本文 文檔為doc格式

標簽：的選項選項卡 jQuery

熱門焦點

結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery

結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery

結構/表現/行為完全分離的選項卡(jquery版和原生JS版)_jquery

最新推薦

猜你喜歡

熱門推薦