当前位置：Gxlcms > JavaScript > 结构/表现/行为完全分离的选项卡(jquery版和原生JS版)_jquery

结构/表现/行为完全分离的选项卡(jquery版和原生JS版)_jquery

时间：2021-07-01 10:21:17 帮助过：26人阅读

关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释.
另有几点说明:
1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定义初始状态下隐藏第二三个显示区的原因;
2. 本文只是选项卡一个原型实现,若要用于同一页面多个选项卡,变量已集中到函数头部,可自行封装成函数;
3. 请不要问如何实现更酷很炫的效果,请自已思考添加效果;
4. 不希望大家用这个效果时只是机械的复制粘贴,思考加实践,然后消化成自己的.
查看演示:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="gb2312"> 
<meta name="author" content="Mr.Think青鸟" /> 
<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<divs.length;k++){//我为了省事,用一个for循环定义默认显示第一个切换区块,其他隐藏.这个最好用CSS定义,能避免页面加载时它全部显示出来. 
divs[k].style.display='none'; 
} 
for(var l=0;l<list.length;l++){//点击事件 
list[l].onclick=function(){ 
index=indexValue(this,list);//利用前面定义的indexValue函数取当前点击在选项导航中的索引值, 
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';//显示点击对应的选项区,隐藏其他 
} 
} 
} 
} 
</ script> 
</head> 
<body> 
<h2>Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.</h2> 
<h3>返回文章页:结构/表现/行为完全分离的选项卡(jQ版和原生JS版)@Mr.Think</h3> 
 
 
<h2>基于jQ版本</h2> 
<ul class="tabnav"> 
<li>jQuery技术</li> 
<li>CSS技术</li> 
<li>xhtml技术</li> 
</ul> 
<div class="tabbox"> 
<div>jQuery技术在这里显示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/1.jpg" /></div> 
<div>CSS技术在这里显示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/2.jpg" /></div> 
<div>xhtml技术在这里显示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/3.png" /></div> 
</div> 
 
<h2>原生JS版本</h2> 
<ul id="tabnav"> 
<li>jQuery技术</li> 
<li>CSS技术</li> 
<li>xhtml技术</li> 
</ul> 
<div id="tabbox"> 
<div>jQuery技术在这里显示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/1.jpg" /></div> 
<div>CSS技术在这里显示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/2.jpg" /></div> 
<div>xhtml技术在这里显示!@Mr.Think.
<img src="http://files.jb51.net/demoimg/201008/3.png" /></div> 
</div> 
 
</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';//显示点击对应的选项区,隐藏其他 
} 
} 
} 
} 

结构/表现/行为完全分离的选项卡(jquery版和原生JS版)_jquery

人气教程排行