jquery实现的tab切换
1、jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。下面跟大家分享一个jquery的tab切换
2、如何使用
调用jquery文件
<script type="text/javascript" src="jquery.js"></script>
jquery实现tab效果
<script>
$(function(){
$("div [id^='tabcc_']").each(
function(i,ob){
$(ob).find('a').bind
('mouseover',function(){
$(ob).find('a').removeClass('on');
$(this).addClass('on');
var cid=$(this).attr('cid');
$(ob).siblings('div').hide();
$(ob).siblings("div[id='courseList_"+cid+"']").show();
});
});
})
</script>
2、关于tab的html结构
<div class="manage">
<div class="manage_title" id="tabcc_0">
<a href="/opencourse/501/index.htm" cid="501" class='on'>战略管理</a>
<a href="/opencourse/502/index.htm" cid="502" >市场营销</a>
<a href="/opencourse/505/index.htm" cid="503" >采购管理</a>
</div>
<div class="manage_txt" id="courseList_501" style="display:block; height:100px; padding:20px;">
789
</div>
<div class="manage_txt" id="courseList_502" style="display:none; height:100px; padding:20px; ">
456
</div>
<div class="manage_txt" id="courseList_503" style="display:none; height:100px; padding:20px; ">
123
</div>
</div>
这个tab切换可以一个页面多个使用,适用于不同结构的tab切换
<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$("div [id^='tabcc_']").each(
function(i,ob){
$(ob).find('a').bind
('mouseover',function(){
$(ob).find('a').removeClass('on');
$(this).addClass('on');
var cid=$(this).attr('cid');
$(ob).siblings('div').hide();
$(ob).siblings("div[id='courseList_"+cid+"']").show();
});
});
})
</script>
</head>
<body>
<div class="manage">
<div class="manage_title" id="tabcc_0"> <a href="/opencourse/501/index.htm" cid="501" class='on'>战略管理</a> <a href="/opencourse/502/index.htm" cid="502" >市场营销</a> <a href="/opencourse/505/index.htm" cid="503" >采购管理</a> </div>
<div class="manage_txt" id="courseList_501" style="display:block; height:100px; padding:20px;"> 789 </div>
<div class="manage_txt" id="courseList_502" style="display:none; height:100px; padding:20px; "> 456 </div>
<div class="manage_txt" id="courseList_503" style="display:none; height:100px; padding:20px; "> 123 </div>
</div>
</body>
</html>
相关文章
- QQ添加好友代码
QQ添加好友代码 复制代码 代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a
- 网站新信息标题闪烁效果实现
网站新信息标题闪烁效果实现,很简单的一个功能,但是非常的实用,能够吸引访客注意,有效提高转化。 效果图:
- JS判断手机访问跳转到手机站使用百度uaredirect.js
使用了百度SIteApp提供的一个判断手机访客的js代码uaredirect.js,来实现当用户使用手机访问我们的PC站的时候自动跳转到我们的手机站。 用法非常简单: 第一段是引用百度的uaredirect.js,本人还是喜欢将代码保存到本地,代码量也不是很大。 第二段是使用代
- 使用新浪获取IP所在地接口做网站跳转
使用新浪获取IP接口做网站跳转 title使用新浪获取IP接口做网站跳转/title !--引用新浪IP获取接口-- script type=text/javascript src=http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js/script !--引用新浪IP获取接口-- script type=text/javas
- 不错的医院页面挂号下拉效果
不错的医院页面挂号下拉效果,仅供参考。 效果截图:
随机推荐
- QQ添加好友代码
QQ添加好友代码 复制代码 代码如下: a href=tencent://AddContact/?fromId=50fromSubId=1subcmd=alluin=12345678加个好友吧/a
- 网站新信息标题闪烁效果实现
网站新信息标题闪烁效果实现,很简单的一个功能,但是非常的实用,能够吸引访客注意,有效提高转化。 效果图:
- JS判断手机访问跳转到手机站使用百度uaredirect.js
使用了百度SIteApp提供的一个判断手机访客的js代码uaredirect.js,来实现当用户使用手机访问我们的PC站的时候自动跳转到我们的手机站。 用法非常简单: 第一段是引用百度的uaredirect.js,本人还是喜欢将代码保存到本地,代码量也不是很大。 第二段是使用代
- 使用新浪获取IP所在地接口做网站跳转
使用新浪获取IP接口做网站跳转 title使用新浪获取IP接口做网站跳转/title !--引用新浪IP获取接口-- script type=text/javascript src=http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js/script !--引用新浪IP获取接口-- script type=text/javas
- 不错的医院页面挂号下拉效果
不错的医院页面挂号下拉效果,仅供参考。 效果截图: