基于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 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
javascript中的delete使用详解
Apr 11 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
javascript执行环境及作用域详解
May 05 Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 Javascript
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
js实现鼠标单击Tab表单切换效果
May 16 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 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 时间转换Unix时间戳代码
2010/01/22 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
JavaScript实现三级级联特效
2017/11/05 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python+selenium 点击单选框-radio的实现方法
2019/09/03 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
保护环境倡议书300字
2014/05/19 职场文书
2015年党日活动总结范文
2015/03/25 职场文书
2015年公务员转正工作总结
2015/04/24 职场文书
现货白银电话营销话术
2015/05/29 职场文书
2016年清明节红领巾广播稿
2015/12/17 职场文书
小学语文教学反思范文
2016/03/03 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
spring cloud eureka 服务启动失败的原因分析及解决方法
2022/03/17 Java/Android
5个pandas调用函数的方法让数据处理更加灵活自如
2022/04/24 Python