软件开发培训班 >> 编程开发 >> JavaScript

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

　　本文标签：分离,选项卡

<!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的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." /> 
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" /> 
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" /> 
<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> 
<h1>Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.</h1> 
<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>

技术文章快速查找

javascript与webservice的通信实现代码

js中将String转换为number以便比较

js超漂亮的鼠标提示，带人性化缺口

浅析jquery的js图表组件highcharts

jQuery操作元素css样式的三种方法

jQuery 学习第五课 Ajax 使用说明

jQuery取id有.的值的方法

代码生成器 document.write()

相关下载

在线教程导航

软件应用
·Windows8	·Windows7	·Word
·Excel	·PPT	·WPS
Web开发
·ASP	·JavaScript	·DIV+CSS
·JSP	·VbScript	·XML
·PHP
开发语言
·VB	·VC	·ASP.NET
·Java	·C++	·Delphi
数据库开发
·MySQL	·MsSQL	·Access
·Oracle	·DB2
手机系统
·Android	·iOS	·WindowsPhone
网站设计
·Flash	·Dreamweaver	·Fireworks
平面设计
·Photoshop	·CorelDraw	·AutoCAD
·3DsMAX	·Illustrator
网络技术
·网站运营	·网络安全	·网络搭建