基于jquery自己写tab滑动门(通用版)
发布时间:2024-04-22 22:21:09
标签:tab,滑动门
css:
.main
{
height:360px;
width:290px;
border:1px solid #444444;
font-size:12px;
color:#444444;
margin:20px;
}
.main_top
{
height:30px;
width:290px;
line-height:30px;
text-align:left;
background-color:#999999;
border-bottom:1px solid #444444;
}
.main_top ul
{
padding:0px;
margin:0px;
list-style-type:none;
position:absolute;
}
.main_top ul li.h_qian
{
float:left;
width:80px;
text-align:center;
background-color:#999999;
height:30px;
}
.main_top ul li.h_hou
{
float:left;
width:80px;
text-align:center;
background-color:#ffffff;
cursor:pointer;
margin-top:1px;
height:30px;
font-weight:bold;
}
.main_content
{
margin:10px;
}
js:
function tabchange(obj,p,c,q,h) {
$(obj).parent().find("li").attr("class", ""+q+"");
$(obj).parents("."+p+"").find("."+c+"").hide();
$(obj).attr("class", ""+h+"");
var j = $(obj).index();
$(obj).parents("."+p+"").find("."+c+":eq(" + j + ")").show();
}
html:
<div class="main">
<div class="main_top">
<ul>
<li class="h_hou" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第一模块</li>
<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第二模块</li>
<li class="h_qian" onmouseover="tabchange(this,'main','main_content','h_qian','h_hou')">第三模块</li>
</ul>
</div>
<div class="main_content">第1块
</div>
<div class="main_content" style="display:none;">第2块
</div>
<div class="main_content" style="display:none;">第3块
</div>
</div>
代码很简单,不多说了,详细使用方法请参照Demo中tangtab.js里的注释。
附:
在线演示:http://demo.aspxhome.com/js/2012/TabDemo/
打包下载:TabDemo_jb51.rar


猜你喜欢
- pandas loc的指定条件索引(布尔索引)pandas中的loc不仅仅可以用于直接的标签的索引,也可以用于指定条件的索引。1.准备数据首
- 开发环境:win10-64 python2.7.16 chrome77from selenium import we
- 在线音乐播放器,使用python的Tkinter库做了一个界面,感觉这个库使用起来还是挺方便的,音乐的数据来自网易云音乐的一个接口,通过ur
- 本文实例为大家分享了vue实现验证码倒计时按钮的具体代码,供大家参考,具体内容如下1、点击“发送验证码”按钮后进行逻辑判断:▶️ 如果邮箱已
- collections是Python内建的一个集合模块,提供了许多有用的集合类。这里举几个例子:namedtuple我们知道tuple可以表
- 前言最近在评估项目时,要开启评估平台,查看平台和保存平台,感觉非常繁琐,开发了一款可以获取评估平台数据,查看项目排期和直接保存数据到数据库的
- 一、偏好资源的积累利用DreamWeaver 4制作网页会应用到许多各种类型的要素,比如色彩、图片、模板、脚本等。利用站点资源面板将这些东东
- Python编程中类的概念可以比作是某种类型集合的描述,如“人类”可以被看作一个类,然后用人类这个类定义出每个具体的人——你、我、他等作为其
- 一、re.findall函数介绍它在re.py中有定义:def findall(pattern, string, flags=0): &nb
- 引言“深入认识Python内建类型”这部分的内容会从源码角度为大家介绍Python中各种常用的内建类
- 前言为什么会做这个?因为我们把word转化为pdf,wps默认转化为文字pdf,而图片pdf要会员。网上确实也有网站可以实现免费的,但是未必
- python-docx的简单使用'''设置表格所有单元格的四个边为0.5磅,黑色,实线可以使用返回值,也可以不使用&
- 了解SQL Server 2005数据库的朋友可能都知道,tempdb系统数据库是一个全局资源,可供连接到SQL Server 2005实例
- 需求说明当用户申请售后,商家未在n小时内处理,系统自动进行退款。商家拒绝后,用户可申请客服介入,客服x天内超时未处理,系统自动退款。用户收到
- 前言本系列文章将依据官方文档讲解Webots R2022b的使用教程(Windows10环境)。一、Webots是什么?Webots是一个开
- reduce() 函数在 python 2 是内置函数, 从python 3 开始移到了 functools 模块。官方文档是这样介绍的re
- 安装破解包:AWVS14.6.220117111破解Win&Linux&Mac.zip网盘链接:https://pan.ba
- 原文件:7.8094,1.0804,5.7632,0.012269,0.008994,-0.003469,-0.79279,-0.06468
- 用于处理XML文档的DOM元素属性 childNodes:返回当前元素所有子元素的数组; firstChild:返回当前元素的第一个下级子元
- 一个小项目自动登录淘宝联盟抓取数据,由于之前在Github上看过类似用Python写的代码因此选择用Python来写,第一次用Python正