JQuery 选项卡效果(JS与HTML的分离)
发布时间:2024-04-19 10:43:05
标签:JQuery,选项卡
在实际应用过程中,只要保证选项卡模块结构代码的完整性,就可以任意添加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>
0
投稿
猜你喜欢
- 这个问题的解决方案网上挺多的。其中我推荐的就是:with open(r"F:\Desktop\Book3.csv",
- 1. random库基本介绍Random库时使用随机数的python标准库伪随机数:采用梅森旋转算法生成的(伪)随机序列中的元素Random
- 本文实例为大家分享了python3 pillow模块验证码的具体代码,供大家参考,具体内容如下直接放代码吧,该写的注释基本都写了# -*-
- Introduction分享今天同事问的一个问题, 下面这段代码会报错,先看代码:重点是el-form-item组件的prop属性<t
- 众所周知,binlog日志对于mysql数据库来说是十分重要的。在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定
- Python列表和字典前面我们了解了 “大O表示法” 以及对不同的算法的评估,下面来讨论下 Python 两种内置数据类型有关的各种操作的大
- 这篇文章主要介绍了python垃圾回收机制(GC)原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要
- 目录一、安装与配置二、定义模型三、生成模型四、访问Django Admin五、操作数据六、最后一、安装与配置Djongo的项目官方地址为:h
- 代码如下:using System; using System.Data; using System.Configuration; usin
- 1. 创建用户模块应用创建应用users$ python manage.py startapp users 2. 注册用户模块应用
- 数据:一个db,2000个表格,2000张表格数据,每条记录30个column,平均每张表格4.3w条记录,总共86388670条记录。机器
- 从windows操作系统本地读取csv文件报错data = pd.read_csv(path)Traceback (most recent
- 三子棋的python实现代码,供大家参考,具体内容如下一、基本流程三子棋游戏实现逻辑如下:1、创建初始化3*3棋盘;2、玩家执U子,先进行落
- 下载mysql安装包,我的是下载mysql-8.0.11-winx64,解压到你想安装的目录下,然后配置环境(window环境下,mac本还
- string.Template()string.Template()内添加替换的字符, 使用"$"符号, 或 在字符串内
- 简介Node2vec是一种用于图嵌入(Graph Embedding)的方法,可用于节点分类、社区发现和连接预测等任务。实现过程
- 本文实例讲述了Python编程修改MP3文件名称的方法。分享给大家供大家参考,具体如下:最近刚刚开始学习Python,顺便锻炼思维写的一个小
- 前言本文提供将视频按照自定义尺寸进行裁剪的工具方法,一如既往的实用主义。环境依赖ffmpeg环境安装,可以参考文章:windows ffmp
- 一,命名空间函数 tf.variable_scope tf.name_scope 先以下面的代码说明两者的区别# 命名空间管理函数'
- 排序排序是指以特定格式排列数据。排序算法指定以特定顺序排列数据的方式。最常见的顺序是数字或字典顺序。在 Numpy 中,我们可以使用库中提供