基于jquery库的tab新形式使用


Posted in Javascript onNovember 16, 2012
<html> 
<title> 
</title> 
<script src="js/jquery.min.js" type="text/javascript"></script> 
<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 { 
border:1px solid #ccc; 
margin:10px; 
} 
.tagMenu { 
height: 24px; 
position:relative; 
border-bottom:1px solid #999 
} 
.tagMenu ul { 
position:absolute; 
bottom:-1px; 
height:26px; 
} 
ul.menu li { 
float:left; 
border-left:1px solid #999; 
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"> 
<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> 
</body> 
</html>

基于jquery库的tab新形式使用

Javascript 相关文章推荐
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
全面解析标签页的切换方式
Aug 21 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
Mar 15 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
vue filters的使用详解
Jun 11 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
js实现移动端吸顶效果
Jan 08 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 #Javascript
javascript 图片裁剪技巧解读
Nov 15 #Javascript
中国地区三级联动下拉菜单效果分析
Nov 15 #Javascript
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 #Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 #Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 #Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 #Javascript
You might like
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
php上传图片并压缩的实现方法
2015/12/22 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP chr()函数讲解
2019/02/11 PHP
PHP与Web页面交互操作实例分析
2020/06/02 PHP
被jQuery折腾得半死,揭秘为何jQuery为何在IE/Firefox下均无法使用
2010/01/22 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
2014/10/22 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
jquery validate表单验证插件
2016/09/06 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
微信小程序非跳转式组件授权登录的方法示例
2019/05/22 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
Python中apply函数的用法实例教程
2014/07/31 Python
python实现对一个完整url进行分割的方法
2015/04/29 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
校园报刊亭创业计划书
2014/01/02 职场文书
公务员保密承诺书
2014/03/27 职场文书
报告会主持词
2014/04/02 职场文书
教师专业自荐信
2014/05/31 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
Redis 异步机制
2022/05/15 Redis
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript