jQuery简单实现tab选项卡切换效果
抽空把公司项目上用的tab效果封装了一下，实在是需要用的地方太多了~~~
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.2/jquery.min.js"></script>
<title>简单的tab效果</title>
<style type="text/css">
* {
padding: 0px;
margin:0px
}
body {
text-align: center
}
.wrap ul {
overflow: hidden
}
.wrap li {
float: left;
list-style: none;
margin-right: 10px;
cursor: pointer;
padding: 2px 5px
}
.link {
cursor: pointer;
color: #F00
}
.wrap {
width: 200px;
margin: 50px auto
}
.wrap, .ellipsis {
font-size: 12px;
width: 200px;
}
.tab_div div {
display: none;
padding: 10px;
}
.tab_div {
text-align: left;
border: 1px #CCC solid;
height: 200px;
clear: both
}
.cur {
background: #060;
color: #FFF
}
#setTab_2{
margin-top: 20px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//tab
$("#setTab").setTab();
$("#setTab_2").setTab();
});
/*插件代码*/
(function ($) {
$.fn.setTab = function () {
var getTab=$(this),//this指向调用函数的ID
panels = getTab.children("div.tab_div").children("div"),
tabs = getTab.find("li");
return this.each(function(){
$(tabs).click(function(e) {
var index = $.inArray(this, $(this).parent().find("li"));//this指向li
if (panels.eq(index)[0]) {
$(tabs).removeClass("cur");
$(this).addClass("cur");
panels.css("display", "none").eq(index).css("display", "block");
}
});
});
}
})(jQuery);
</script>
</head>
<body class="wrap">
<div id="setTab">
<ul class="tab_nav">
<li class="cur">国事</li>
<li>军情</li>
<li>图片</li>
</ul>
<div class="tab_div">
<div style="display: block">国事</div>
<div>军情</div>
<div>图片</div>
</div>
</div>
<div id="setTab_2">
<ul class="tab_nav">
<li>国事</li>
<li class="cur">军情</li>
<li>图片</li>
</ul>
<div class="tab_div">
<div>国事</div>
<div style="display: block">军情</div>
<div>图片</div>
</div>
</div>
</body>
</html>
以上就是本文的全部内容，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
动感效果的TAB选项卡jquery 插件
效果图:动感效果的TAB选项卡 jquery 插件 复制代码 代码如下: <!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&g
-
jQuery实现滚动切换的tab选项卡效果代码
本文实例讲述了jQuery实现滚动切换的tab选项卡效果代码.分享给大家供大家参考.具体如下: 这里介绍的jquery tab选项卡滚动动态切换代码,似乎很个性的网页选项卡,没有边框的修饰,但十分简约大方,选项卡菜单目前在各大网站很流行,做为前端设计者,能够得心应手的写出一个选项卡是很有必要的哦,希望本代码能为您带去一份参考资料. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-cha-tab-nav-style-
-
jQuery实现Tab选项卡切换效果简单演示
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-
-
jquery编写Tab选项卡滚动导航切换特效
本文实例为大家分享jquery编写Tab选项卡切换特效,供大家参考,具体内容如下 效果说明:点击tab导航,页面滑动到下方相应板块.并且当页面通过鼠标滚动下去时,上方的tab也可以自动切换到当前位置的板块上. 代码说明:js中对两个动作分别写,一个是tab点击下滑到相应板块位置:一个是鼠标滚动下去的时候tab判定当前页面滚动高度切换tab. js: $(document).ready(function(){ $('.switch-tab>li').click(function(){ var s=
-
基于JQuery的6个Tab选项卡插件
顺便也找 来了不少优秀的Tab选项卡实例,在这里与大家分享一下.当然,最终我没有用到IdTabs以及如下任何一个实例,我只是很不服气的自己写了个小插件,尚 不完善,就不于此共享了.先来看看老外们出色的基于JQuery的各式Tab选项卡吧:1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的.此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单.要非常留心此 演示哟,你一定会喜欢上它的.演示 | 下载 | 介绍 2
-
JQuery Tab选项卡效果代码改进版
介绍的是基于JQuery实现的一个选项卡效果,重点体现在HTML里没有内联事件处理程序,而是定义在js文件里,做到行为与结构的分离.在实际应用过程中,只 要保证选项卡模块结构代码的完整性,就可以任意添加N个同类选项卡,不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID. 在这里,我又做了部分的修改,增加了选项卡可自动切换功能,以及选项卡点击相应还是鼠标放上后相应的参数,同时依然支持多次调用. 现在,我把代码贴上,与众博友共享 这是js脚本 复制代码 代码如下: /* jque
-
jQuery实现移动端Tab选项卡效果
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalab
-
jQuery实现tab选项卡效果的方法
本文实例讲述了jQuery实现tab选项卡效果的方法.分享给大家供大家参考.具体如下: var tabs = { init: function(){ var $tab_contents=$('.tab-contents'), $tab_nav=$('.tab-nav'); $tab_contents.find('.tab-content:not(:first)').hide(); $tab_nav.find('li:first').addClass('active'); $tab_nav.on(
-
jQuery封装的tab选项卡插件分享
在网站开发中经常会用到选项卡功能,为了节省一下写代码时间,封装了一下tab插件,方便调用. 创建选项卡组件 使用方法: html结构 <div id="tabs"> <ul> <li><a href="#tabs-1">tab-1</a></li> <li><a href="#tabs-2">tab-2</a></li> <
-
jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery tab切换</title> <style type="text/css"> *{ margin:0; pad