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

结构/表现/行为完全分离的选项卡(jQ版和原生JS版)@Mr.Think

/*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}

/*******************************
* @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

Mr.Think的个人博客
@专注前端技术,热爱PHP,崇尚简单生活.

返回文章页:结构/表现/行为完全分离的选项卡(jQ版和原生JS版)@Mr.Think

基于jQ版本

• jQuery技术
• CSS技术
• xhtml技术

jQuery技术在这里显示!@Mr.Think.

CSS技术在这里显示!@Mr.Think.

xhtml技术在这里显示!@Mr.Think.

原生JS版本

• jQuery技术
• CSS技术
• xhtml技术

jQuery技术在这里显示!@Mr.Think.

CSS技术在这里显示!@Mr.Think.

xhtml技术在这里显示!@Mr.Think.

[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;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';//显示点击对应的选项区,隐藏其他
}
}
}
}

您可能感兴趣的文章:

• jQuery实例—选项卡的简单实现(js源码和jQuery)
• jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
• 原生js和jQuery写的网页选项卡特效对比
• 简单选项卡 js和jquery制作方法分享
• js/jQuery简单实现选项卡功能
• JQuery 选项卡效果(JS与HTML的分离)
• 原生JS与jQuery编写简单选项卡

Tags：分离 选项卡

相关文章

• 2015-03-03jQuery模拟新浪微博首页滚动效果的方法
• 2017-09-09解决jquery appaend元素中id绑定事件失效的问题
• 2013-12-12jquery对ajax的支持介绍
• 2017-07-07easyui简介_动力节点Java学院整理
• 2012-09-09jQuery学习笔记 获取jQuery对象
• 2014-06-06jQuery绑定事件不执行但alert后可以正常执行
• 2008-08-08jquery复选框CHECKBOX全选、反选
• 2013-01-01jquery获取div宽度的实现思路与代码
• 2014-03-03jquery mobile动态添加元素之后不能正确渲染解决方法说明
• 2014-08-08jquery实现的下拉和收缩效果示例

最新评论