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>
相关文章
- JS判断手机访问函数
函数is_mobile()手机端返回true,PC端返回false,根据返回值来判断时候是手机端访问,然后做相应的操作。 复制代码 代码如下: script function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browse
- html5输入框正则验证
html5输入框正则验证,输入框禁止粘贴,禁止右键菜单。
- 假404效果代码
假404效果代码,使用frameset框架覆盖原网页内容,实现网页打不开的假象,直接在网站头部引用404.js即可。 代码下载: 假404效果代码 效果截图:
- JS禁止复制网站文章代码
JS禁止复制网站文章代码,可以实现网页上的文本无法复制,在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码: 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond
- JS强制弹出QQ对话框
JS强制弹出QQ对话框,需要访客电脑上已安装QQ,并且浏览器中启用了QQ对话插件(基本99%的访客满足条件)。 复制代码 代码如下: script //采用定时器延时弹出,不想延时可去除定时器,直接使用以下代码 //window.location.href = tencent://message/?uin=1413
随机推荐
- JS判断手机访问函数
函数is_mobile()手机端返回true,PC端返回false,根据返回值来判断时候是手机端访问,然后做相应的操作。 复制代码 代码如下: script function is_mobile() { var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browse
- html5输入框正则验证
html5输入框正则验证,输入框禁止粘贴,禁止右键菜单。
- 假404效果代码
假404效果代码,使用frameset框架覆盖原网页内容,实现网页打不开的假象,直接在网站头部引用404.js即可。 代码下载: 假404效果代码 效果截图:
- JS禁止复制网站文章代码
JS禁止复制网站文章代码,可以实现网页上的文本无法复制,在网页上右键不显示弹出菜单。 实现原理是在网页的body标签中添加一下代码: 复制代码 代码如下: onmouseup=document.selection.empty() oncontextmenu=return false onselectstart=return false ond
- JS强制弹出QQ对话框
JS强制弹出QQ对话框,需要访客电脑上已安装QQ,并且浏览器中启用了QQ对话插件(基本99%的访客满足条件)。 复制代码 代码如下: script //采用定时器延时弹出,不想延时可去除定时器,直接使用以下代码 //window.location.href = tencent://message/?uin=1413