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>
相关文章
- 使用新浪获取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
- JS判断手机号码座机号码函数
JS判断手机号码座机号码函数,可以准确判断手机和座机号码。 复制代码 代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu
- 假404效果代码
假404效果代码,使用frameset框架覆盖原网页内容,实现网页打不开的假象,直接在网站头部引用404.js即可。 代码下载: 假404效果代码 效果截图:
- JS点击页面出现赞效果
JS点击页面出现赞效果,点击页面任何地方出现随机的数字向上漂浮效果,挺炫的一种效果。 完整代码: 复制代码 代码如下: script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script script jQuery(document).ready(function($) { $(html,body).click(
- JS兼容多种浏览器的设为首页和加入收藏夹代码
JS兼容多种浏览器的设为首页和加入收藏夹代码,设为首页和加入收藏夹分别对应两个函数setHomePage,addFavorite。 示例代码: 设为首页:a href=javascript:; onclick=setHomePage(http://www.120muban.com/);设为首页/a 加入收藏夹:a href=javascript:; oncl
随机推荐
- 使用新浪获取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
- JS判断手机号码座机号码函数
JS判断手机号码座机号码函数,可以准确判断手机和座机号码。 复制代码 代码如下: function Tel(num){ var partten = /^(1[3,4,5,8]\d{9}|01[3,4,5,8]\d{9}|010[1-9]{1,2}\d{6}|02[0-9][1-9]{1,2}\d{6}|0[1-9]{2}[0-9][1-9]{1,2}\d{6})$/; if(partten.test(nu
- 假404效果代码
假404效果代码,使用frameset框架覆盖原网页内容,实现网页打不开的假象,直接在网站头部引用404.js即可。 代码下载: 假404效果代码 效果截图:
- JS点击页面出现赞效果
JS点击页面出现赞效果,点击页面任何地方出现随机的数字向上漂浮效果,挺炫的一种效果。 完整代码: 复制代码 代码如下: script src=http://libs.baidu.com/jquery/1.9.0/jquery.js/script script jQuery(document).ready(function($) { $(html,body).click(
- JS兼容多种浏览器的设为首页和加入收藏夹代码
JS兼容多种浏览器的设为首页和加入收藏夹代码,设为首页和加入收藏夹分别对应两个函数setHomePage,addFavorite。 示例代码: 设为首页:a href=javascript:; onclick=setHomePage(http://www.120muban.com/);设为首页/a 加入收藏夹:a href=javascript:; oncl