jQuery版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">
<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="javascript: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").mouseover(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>

赞 (0)

相关推荐

  • 一个tab标签切换效果代码

    一个tab标签切换效果代码

    HTML: 复制代码 代码如下: <div class="tab"> <div id="tabsK"> <ul id="menu4"> <li onclick="settab(4,0)" class="hover"><a title="最新更新"><span>最新更新</span></a>&l

  • Vue.js组件tabs实现选项卡切换效果

    Vue.js组件tabs实现选项卡切换效果

    今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di

  • JS封装的选项卡TAB切换效果示例

    JS封装的选项卡TAB切换效果示例

    本文实例讲述了JS封装的选项卡TAB切换效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>JS封装的选项卡TAB代码</title> <style type="text/css"> *{ padding:0; margin:0;}

  • Android TabWidget切换卡的实现应用

    Android TabWidget切换卡的实现应用

    TabWidget类似于Android 中查看电话薄的界面,通过多个标签切换显示不同内容.要实现这一效果,首先要了解TabHost,它是一个用来存放多个Tab标签的容器.每一个Tab都可以对应自己的布局,比如,电话薄中的Tab布局就是一个List的线性布局了. 要使用TabHost,首先需要通过getTabHost方法来获取TabHost的对象,然后通过addTab方法来向TabHost中添加 Tab.当然每个Tab在切换时都会产生一个事件,要捕捉这个事件需要设置TabActivity的事件监听

  • 使用jquery实现div的tab切换实例代码

    jQuery实现Tab切换 接触jQ不久以前的js代码来写的简单效果现在用jQ来写: HTML代码: 复制代码 代码如下: <div id="sidebar-tab"> <div id="tab-title"> <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</s

  • 一个精简的JS DIV层tab切换代码

    DIV层切换 function ChangeDiv(divId,divName,zDivCount) { for(i=0;i 内容一 内容二 内容三 内容部分第一区 内容部分第二区 内容部分第三区 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据

    微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据 那么如果还想要实现我们的效果只能用别的方法了 想了一下有两种思

  • Vue.js组件tab实现选项卡切换

    Vue.js组件tab实现选项卡切换

    本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:

  • 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换

    微信小程序开发中选项卡.在Android中选项卡一般用fragment,到了小程序这里瞬间懵逼了. 总算做出来了.分享出来看看. 先看效果: 再上代码: 1.index.wxml <!--index.wxml--> <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0"

  • tab栏切换原理

    tab栏切换原理

    本文是我学习tab栏切换时的笔记,步骤很详细.比较适用于JavaScript初学者 1.基础 - 排他思想 如图,点击任意一个按钮,当前按钮应该显示橘色,其他显示默认颜色灰色. 代码运行步骤: 利用for循环遍历5个按钮: 选中的按钮进行 onclick 事件时,首先删除所有按钮的类名,使其全部显示灰色(34行): 然后给当前点击的按钮添加指定类名,使其显示橘色(37行). 示例代码: <!DOCTYPE html> <html> <head> <meta cha

随机推荐