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>

CSS样式代码如下:


代码如下:

<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>

HTML结构代码如下:


代码如下:

<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>

时间: 2010-03-31

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插件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"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>原生js tab</tit

简单选项卡 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

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

关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初

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和CSS3制作数字时钟附源码下载(jquery篇)

废话不多说了,先给大家展示下效果图,感兴趣的朋友继续往下看 哦 查看演示       源码下载 HTML 和上一篇文章:使用jQuery和CSS3制作数字时钟(CSS3篇)一样的HTML结构,只是多了个>date用来展示日期和星期的. <div id="clock" class="light"> <div class="display"> <div class="date"></

详解从Vue.js源码看异步更新DOM策略及nextTick

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出,

Three.js源码阅读笔记(Object3D类)

这是Three.js源码阅读笔记的第二篇,直接开始. Core::Object3D Object3D似乎是Three.js框架中最重要的类,相当一部分其他的类都是继承自Object3D类,比如场景类.几何形体类.相机类.光照类等等:他们都是3D空间中的对象,所以称为Object3D类.Object3D构造函数如下: 复制代码 代码如下: THREE.Object3D = function () { THREE.Object3DLibrary.push( this ); this.id = THR

深入理解Vue.js源码之事件机制

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/answershuto/learnVue. 在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issue指出

jQuery 自定义下拉框(DropDown)附源码下载

先给大家展示下效果图,喜欢的朋友可以下载源码哦 效果演示   源码下载 <section class="main"> <div class="wrapper-demo"> <div id="dd" class="wrapper-dropdown-1" tabindex="1"> <span>手册网</span> <ul class="

jQuery网页版打砖块小游戏源码分享

这是一款基于jQuery实现网页版打砖块小游戏源码,满满的童年回忆. 为大家分享的jQuery实现网页版打砖块小游戏源码如下 效果演示 源码下载 <!DOCTYPE html> <html lang="en" > <head> <meta charset="gb2312" /> <title>jQuery网页版打砖块小游戏源码</title> <link href="css/ma

Three.js源码阅读笔记(光照部分)

天气越来越冷了,人也越来越懒怠,越来越像呆在温暖的寝室里看小说或者打游戏,也好久没看Three.js源码了.今天天气不错,接着看! 这次从光照部分看起:光照模型,从光线本身角度来看包括环境光.平行光.点光源,从物体表面材质角度看又包括漫反射和镜面反射. Lights:Light 复制代码 代码如下: THREE.Light = function ( hex ) { THREE.Object3D.call( this ); this.color = new THREE.Color( hex );

Three.js源码阅读笔记(物体是如何组织的)

这是Three.js源码阅读笔记第三篇.之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化.这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点.表面.材质组合成为一个具体的对象. Object::Mesh 该构造函数构造了一个空间中的物体.之所以叫"网格"是因为,实际上具有体积的物体基本都是建模成为"网格"的. 复制代码 代码如下: THREE.Mesh =

c# 实例——绘制波浪线(附源码)

效果图 界面绘制操作 private Point? _startPoint = null; private void ContainerCanvas_OnPreviewMouseLeftButtonDown(object sender, MouseButtonEventArgs e) { var position = e.GetPosition(ContainerCanvas); if (_startPoint == null) { _startPoint = position; } else