您的位置：首页 > 编程技术 > js  >  基于jquery的9行js轻松实现tab控件示例

基于jquery的9行js轻松实现tab控件示例

 更新时间：2013年10月13日 07:27  点击：2603

代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
/** 
* 考虑到tab和pane有可能被动态的添加和删除， 
* 所以每次都废点时间去查找先前被激活的tab 
*/ 
var tab = function(tabId,activeId){ 
$("#"+tabId).delegate("li:not(#"+activeId+")","click",function(){ 
$("#"+$("#"+activeId).attr("tar")).css("display","none"); 
$("#"+activeId).removeAttr("id"); 

$(this).attr("id",activeId); 
$("#"+$(this).attr("tar")).css("display","block"); 
}); 
}; 
</script> 
</head> 
<style> 
li{ 
border:1px solid #b5e2f3; 
border-bottom:0px; 
float:left; 
width:100px; 
height:25px; 
margin:0 7px; 
background:#F1FEF3; 
padding:9px 0 0 0; 
text-align:center; 
color:#33a3dc; 
cursor:pointer; 
} 
ul{ 
width:800; 
height:36px; 
border-bottom:1px solid #b5e2f3; 
} 
#selected{ 
background:#FFF!important; 
border-bottom:2px solid #FFF!important; 
} 
ul{margin:-1px;} 
#cate1,#cate2, #cate3, #cate4, #cate5{ 
clear:both; 
height:300px; 
background:#FFFFFF; 
width:800px; 
height:100px; 
padding:25px; 
border:1px solid #b5e2f3; 
} 
</style> 
<body> 
<div id="tab"> 
<ul> 
<li tar="cate1" id="selected">1</li> 
<li tar="cate2">2</li> 
<li tar="cate3">3</li> 
<li tar="cate4">4</li> 
</ul> 
</div> 
<div> 
<div id="cate1" style="display:block;"> 
1 
</div> 
<div id="cate2" style="display:none;"> 
2 
</div> 
<div id="cate3" style="display:none;"> 
3 
</div> 
<div id="cate4" style="display:none;"> 
4 
</div> 
</div> 
</body> 
<script> 
tab("tab","selected"); 
</script> 
</html>


[!--infotagslink--]

相关文章

  • php5.3下使用php管理crontab计划任务

    php5.3或以上版本可以使用php管理crontab计划任务，下面我先来体验一下，有需要学习了解的朋友可进入参考。 1.使用php-crontab-manager管理计划任务 要求 PHP>=5.3...2016-11-25

  • vant 解决tab切换插件标题样式自定义的问题

    这篇文章主要介绍了vant 解决tab切换插件标题样式自定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-14

  • jquery实现有过渡效果的tab切换

    这篇文章主要为大家详细介绍了jquery实现有过渡效果的tab切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-07-17

  • ionic实现可滑动的tab选项卡切换效果

    这篇文章主要为大家详细介绍了ionic实现可滑动的tab选项卡切换效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-09-01

  • C++解析特殊符号tab、换行符号实例代码

    这篇文章主要给大家介绍了关于C++解析特殊符号tab、换行符号的相关资料，这个功能在我们日常开发中经常会遇到，需要的朋友可以参考下...2021-05-16

  • 小程序实现点击tab切换左右滑动

    这篇文章主要为大家详细介绍了小程序实现点击tab切换左右滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2020-11-15

  • C# 键盘Enter键取代Tab键实现代码

    这篇文章主要介绍了C# 键盘Enter键取代Tab键实现代码，有需要的朋友可以参考一下...2020-06-25

  • js开发插件实现tab选项卡效果

    这篇文章主要为大家详细介绍了js开发插件实现tab选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-09-18

  • 分步解析JavaScript实现tab选项卡自动切换功能

    这篇文章主要分步解析JavaScript实现tab选项卡自动切换功能代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-01-26

  • 基于JavaScript实现TAB标签效果

    js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下...2016-01-14

  • javascript实现tab响应式切换特效

    这篇文章主要为大家介绍了javascript实现tab响应式切换特效，以一个完整的实例对tab响应式切换特效进行详细的分析，感兴趣的小伙伴们可以参考一下...2016-02-01

  • crontab无法执行php的解决方法

    这篇文章主要介绍了crontab无法执行php的解决方法,较为详细了Linux平台使用crontab运行PHP的相关注意事项,需要的朋友可以参考下...2016-01-26

  • 原生JS封装vue Tab切换效果

    这篇文章主要为大家详细介绍了原生JS封装vue Tab切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-04-28

  • ionic组件ion-tabs选项卡切换效果实例

    这篇文章主要为大家详细介绍了ionic组件ion-tabs选项卡切换效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2016-09-01

  • 微信小程序实现简单Tab切换效果

    这篇文章主要为大家详细介绍了微信小程序实现简单Tab切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-05-13

  • IDEA中设置Tab健为4个空格的方法

    这篇文章给大家介绍了代码缩进用空格还是Tab？（IDEA中设置Tab健为4个空格）的相关知识，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧...2021-03-09

  • 几种tab切换详解

    本文主要分享了几种tab切换的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧...2017-02-08

  • 值得分享的Bootstrap Ace模板实现菜单和Tab页效果

    这篇文章主要为大家分享了基于Bootstrap Ace模板实现菜单和Tab页效果，感兴趣的小伙伴们可以参考一下...2016-01-02

  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    这篇文章主要介绍了Android自定义view仿QQ的Tab按钮动画效果(示例代码),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，需要的朋友可以参考下...2021-01-25

  • jquery实现tab选项卡切换效果（悬停、下方横线动画位移）

    这篇文章主要介绍了jquery实现tab选项卡切换效果，实现悬停、下方横线动画位移，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-05-09