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输入框正则验证，输入框禁止粘贴，禁止右键菜单。
- 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
- JS邮箱验证函数
JS邮箱验证函数。 关键代码： 复制代码 代码如下: function emailCheck(str){ return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(str); } 使用方法： emailCheck(邮箱); alert(emailCheck(10001
- 阻止浏览器调试的代码
一段阻止浏览器调试的代码。
随机推荐
- 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输入框正则验证，输入框禁止粘贴，禁止右键菜单。
- 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
- JS邮箱验证函数
JS邮箱验证函数。 关键代码： 复制代码 代码如下: function emailCheck(str){ return /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(str); } 使用方法： emailCheck(邮箱); alert(emailCheck(10001
- 阻止浏览器调试的代码
一段阻止浏览器调试的代码。