JQuery 选项卡效果(JS与HTML的分离)
在实际应用过程中，只要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。
Javascript（jquery）代码如下：
代码如下:
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("ul.menu li:first-child").addClass("current");
$("div.content").find("div.layout:not(:first-child)").hide();
$("div.content div.layout").attr("id", function(){return idNumber("No")+ $("div.content div.layout").index(this)});
$("ul.menu li").click(function(){
var c = $("ul.menu li");
var index = c.index(this);
var p = idNumber("No");
show(c,index,p);
});
function show(controlMenu,num,prefix){
var content= prefix + num;
$('#'+content).siblings().hide();
$('#'+content).show();
controlMenu.eq(num).addClass("current").siblings().removeClass("current");
};
function idNumber(prefix){
var idNum = prefix;
return idNum;
};
});
</script>
<style type="text/css">
* {margin:0; padding:0}
ul,li { list-style:none}
.box {width:450px; height:150px; border:1px solid #ccc; margin:10px; font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}
.tagMenu {height:28px; line-height:28px; background:#efefef; position:relative; border-bottom:1px solid #999}
.tagMenu h2 {font-size:12px; padding-left:10px;}
.tagMenu ul {position:absolute; left:100px; bottom:-1px; height:26px;}
ul.menu li {float:left; margin-bottom:1px; line-height:16px; height:14px; margin:5px 0 0 -1px; border-left:1px solid #999; text-align:center; padding:0 12px; cursor:pointer}
ul.menu li.current {border:1px solid #999; border-bottom:none; background:#fff; height:25px; line-height:26px; margin:0}
.content { padding:10px}
</style>
<body>
<div class="box">
<div class="tagMenu">
<h2>No.1 Menu</h2>
<ul class="menu">
<li>Label 1.1</li>
<li>Label 1.2</li>
<li>Label 1.3</li>
<li>Label 1.4</li>
</ul>
</div>
<div class="content">
<div class="layout">infomation 1.1</div>
<div class="layout">infomation 1.2</div>
<div class="layout">infomation 1.3</div>
<div class="layout">infomation 1.4</div>
</div>
</div>
<div class="box">
<div class="tagMenu">
<h2>No.2 Menu</h2>
<ul class="menu">
<li>Label 2.1</li>
<li>Label 2.2</li>
<li>Label 2.3</li>
<li>Label 2.4</li>
</ul>
</div>
<div class="content">
<div class="layout">infomation 2.1</div>
<div class="layout">infomation 2.2</div>
<div class="layout">infomation 2.3</div>
<div class="layout">infomation 2.4</div>
</div>
</div>
</body>
相关推荐
-
结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初
-
简单选项卡 js和jquery制作方法分享
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
原生JS与jQuery编写简单选项卡
本文实例为大家分享了JS编写简单选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery选项卡</title> <style type="text/css"> #div1 div{width: 200px;height: 20
-
原生js和jQuery写的网页选项卡特效对比
总的来说思路比较简单,就是先获取节点,然后对节点进行相应的处理,下面是完整的页面代码: 原生js: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</tit
-
jQuery实例—选项卡的简单实现(js源码和jQuery)
分别利用javascript的源码和jQuery来实现一个简单的选项卡,对比各自的步骤. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m
-
js/jQuery简单实现选项卡功能
第一种方法是用原生的js代码如下: 复制代码 代码如下: <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>简单选项卡</title> <style type="text/css"> body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Ta
-
JQuery 选项卡效果(JS与HTML的分离)
在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. Javascript(jquery)代码如下: 复制代码 代码如下: <script language="javascript" type="text/javascript"> $(document).ready(function(){ $("ul.menu li:first-child&
-
jquery 选项卡效果 新手代码
jquery代码 复制代码 代码如下: $(function(){ //选项卡 var $qqbind=$("#qq_1_1 ul li"); //获取要变化的标题为了设置它背景色变化 $qqbind.click(function(){ var ch=$qqbind.has("pre"); //去找带有pre这个标签的标题;pre是设置她的背景样式下面要用 ch.html(ch.children("pre").html()); //把带有pre标
-
JQuery Tab选项卡效果代码改进版
介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque
-
jquery实现通用的内容渐显Tab选项卡效果
本文实例讲述了jquery实现通用的内容渐显Tab选项卡效果.分享给大家供大家参考.具体如下: 这是一款网页常用的TAB选项卡功能,无鼠标操作的时候它可以自动轮换,美化一般,看上去有些粗糙,有兴趣使用的朋友可以进行细致修饰,相信会更漂亮的. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-info-tab-nav-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD X
-
jquery实现经典的淡入淡出选项卡效果代码
本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
jQuery实现仿腾讯迷你首页选项卡效果代码
本文实例讲述了jQuery实现仿腾讯迷你首页选项卡效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的选项卡,清爽无修饰版,仿腾讯的迷你首页.选项卡的前后可以有一个控件箭头,点击这两个箭头可控件选项卡向左.向右滚动,在有限的网页空间内布局更多的内容成为可能,相信你会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-t-tencent-index-style-nav-codes/ 具体代码如下: <!DOCT
-
表现、结构、行为分离的选项卡效果
从大学开始就一直对JS很感兴趣,可是却很少实际操作,今天练练,试写一个tab,调试过程中才发现光看不练问题不少! 其特点是扩展方便,只要自己添加标题和内容即可,自动初始化. www.jb51.net表现.结构.行为分离的选项卡效果 我们 window.onload=resetTab; function getTabTitle(tab) { var childNodesList=tab.childNodes; var titleNodes=new Array(); var j=0; var i;
-
jQuery实现滚动切换的tab选项卡效果代码
本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-
-
jquery实现超简洁的TAB选项卡效果代码
本文实例讲述了jquery实现超简洁的TAB选项卡效果代码.分享给大家供大家参考.具体如下: 这是一款超简洁的TAB选项卡,个人觉得有点太简单,简单的有点不习惯,美化修饰一下其实效果更好.实际上应该为点击过的TAB添加一个背景色,区分一下,这样比较好. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-easy-tab-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C