一款jquery 实现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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>tab标签切换</title>
</head>
<style>
body{ background:#fff;}
*{ margin:0; padding:0;}
.box{ margin:20px; }
.container{background:#fff; width:500px; clear:both; margin-top:1px; _margin-top:-1px;}
.sub-con{height:300px; width:500px;border:1px solid #3cf; background:#fff; display:none;}
.cur-sub-con{ display:block;}
.sub-con a{ line-height:40px}
.sub-con p{ text-align:center}
.nav{ width:370px; height:28px; margin-left:10px;}
.nav ul{width:370px; height:28px;}
.nav ul li{ list-style:none; display:inline-block;width:60px; height:28px;line-height:28px; text-align:center;margin-left:-9px;*float:left;*margin-left:-1px;}
.nav ul li a{ background:#fff;border:1px solid #3cf; text-decoration:none; color:#000; height:28px;display:block;}
.nav ul li a:hover{ background:#ccedfb}
.nav ul li a.cur{ z-index:9999;border-bottom:1px solid #fff; color:#f00;}
</style>
<body>
<div class="box">
<div class="nav">
<ul>
<li><a href="网页特效:void(0)" class="cur">tab项1</a></li>
<li><a href="javascript:void(0)">tab项2</a></li>
<li><a href="javascript:void(0)">tab项3</a></li>
<li><a href="javascript:void(0)">tab项4</a></li>
</ul>
</div>
<div class="container">
<div class="sub-con cur-sub-con"> <a href="#" title="这是容器1">这是容器1</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img001.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="这是容器2">这是容器2</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g02.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="这是容器3">这是容器3</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g03.jpg" /></p></div>
<div class="sub-con"> <a href="#" title="这是容器4">这是容器4</a><p><img src="http://images.cnblogs.com/cnblogs_com/cos2004/286060/o_img_g04.jpg" /></p></div>
</div>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var intervalid;
var curli;
$(".nav li a").mouseo教程ver(function(){
curli=$(this);
intervalid=setinterval(onmouseover,250);//鼠标移入的时候有一定的延时才会切换到所在项，防止用户不经意的操作
});
function onmouseover(){
$(".cur-sub-con").removeclass("cur-sub-con");
$(".sub-con").eq($(".nav li a").index(curli)).addclass("cur-sub-con");
$(".cur").removeclass("cur");
curli.addclass("cur");
}
$(".nav li a").mouseout(function(){
clearinterval(intervalid);
});

$(".nav li a").click(function(){//鼠标点击也可以切换
clearinterval(intervalid);
$(".cur-sub-con").removeclass("cur-sub-con");
$(".sub-con").eq($(".nav li a").index(curli)).addclass("cur-sub-con");
$(".cur").removeclass("cur");
curli.addclass("cur");
});

});
</script>
</html>

时间： 2024-10-03 01:12:07

一款jquery 实现tab切换卡代码的相关文章

js tab选项切换卡代码

js tab选项切换卡代码 <style type="text/css教程"> body{ font-size:12px; text-align:center; line-height:18px; background-color: #FFFFFF; } .tabs{width:300px; margin:auto;} .tabs_title{width:303px; height:31px; border-bottom:#ffffff solid 0px;} .t

jQuery焦点图切换特效代码分享_jquery

本文实例讲述了jQuery焦点图切换特效.分享给大家供大家参考.具体如下: 这是一款网易保健品商城网站的jQuery焦点图代码,界面简洁.时尚.大方,通用性比较强,实现过程很简单. 运行效果图: -------------------查看效果下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link rel="stylesheet" href="css/zzsc.css

jQuery简单tab切换效果实现方法

本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript ty

jquery 图片滚动切换效果代码

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.111cn.net/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="conte

jQuery简单tab切换效果实现方法_jquery

本文实例讲述了jQuery简单tab切换效果实现方法.分享给大家供大家参考.具体如下: <script src="js/jquery-latest.js"></script> <SCRIPT language=javascript type=text/javascript> $(document).ready(function () { $('.tabtitle li').click(function () { var index = $(this)

最简单的tab切换实例代码_javascript技巧

JS: $(".con").eq(0).show(); $(".btn span").click(function(){ var num =$(".btn span").index(this); $(".con").hide(); $(".con").eq(num).show().slblings().hide(); }) CSS: body { cursor:default; -webkit-text-s

YUI的Tab切换实现代码_YUI.Ext相关

Tab切换应该不依赖于HTML结构,能给设计人员和前端开发最大的灵活性.原理:一个tab对象分为控制部分(trigger),内容部分(sheet).当trigger被触发时,显示对应的sheet. 以前大树写过一个TabControl的代码,经过两年的使用依旧很考谱,说明当初这个思路还是比较符合实际需求的.我改成了基于YUI的版本,可能看起来更清晰一些.先访问测试页面查看效果,完整javascript代码在这里. 注意:改成实际代码时,请将Tab类放在某个命名空间下,不要直接暴露在全局空间中.

一款简单的tab切换代码

menu1 menu2 caiying2007-con1 caiying2007-con2

jquery 图片幻灯片切换效果代码(1/2)

使用方法 1. 引入jquery库文件及jquery.ifadeslide.pack.网页特效插件文件(若页面有其他js文件,可与之合并以减小http请求),引入位置自定义; http://www.111cn.net 代码如下: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="js/jquery.i