jQuery+css实现的tab切换标签(兼容各浏览器)


Posted in Javascript onJanuary 28, 2016

本文实例讲述了jQuery+css实现的tab切换标签。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery+css实现的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>
 <title>tab切换</title>
 <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
 <script type="text/javascript" >
  (function ($) {
   function set_active(tab, isActive, mode) {
    if (!tab) return;
    if (!isActive) {
     tab.removeClass('active');
     if (mode == "header") {
      var related_body = $(tab.find('a').attr('tab_body'));
      set_active(related_body, false, "body");
     }
    } else {
     tab.addClass('active');
     if (mode == "header") {
      var related_body = $(tab.find('a').attr('tab_body'));
      set_active(related_body, true, "body");
     }
    }
   }
   function change_active(self_$_obj) {
    var _self_tab_header = self_$_obj.parent();
    var prev_active_tab_header = _self_tab_header.parent().find('.active');
    set_active(prev_active_tab_header, false, "header");
    set_active(_self_tab_header, true, "header");
   }
   function init(self) {
    if (self.tab_header_length <= 0) { return; }
    var defaut_active_tab_header = null;
    for (var i = 0, length = self.tab_header_length; i < length; i++) {
     var tab_header = $(self.tab_header_array[i]);
     var tab_header_linker = tab_header.find('a');
     tab_header_linker.attr("tab_body", tab_header_linker.attr("href"));
     tab_header_linker.removeAttr("href");
     tab_header_linker.bind("click", function () {
      change_active($(this));
     });
     if (tab_header.hasClass('active')) {
      defaut_active_tab_header = tab_header;
     }
    }
    if (defaut_active_tab_header) {
     change_active($(defaut_active_tab_header.find('a')));
    } else {
     change_active($(self.tab_header_array[0].find(a)));
    }
   }
   $.fn.c_tab = function () {
    var _self = $(this);
    _self.tab_header_group = _self.find('.tab_header_group');
    _self.tab_header_array = _self.tab_header_group.find('.tab_header');
    _self.tab_header_length = _self.tab_header_array.length;
    if (_self.tab_header_length == 0) {
     return;
    }
    init(_self);
   }
  })($);
  $(document).ready(function () {
   $("#tabContainer").c_tab();
  });
 </script>
 <style type="text/css" >
  body { margin:0; padding:0; background:#DFEFFF; }
  #tabContainer { width:500px; height:300px; margin-left:200px; margin-top:50px; border-radius:4px; -webkit-border-radius:4px; -moz-border-radius:4px; }
  .tab_header_group { color:Green; z-index:10; background:#DDDDDD url('img/navbg1.jpg'); width:100%; padding:0; margin:0; border-bottom:1px solid gray; border-radius:4px 4px 0 0;}
  .tab_header { line-height:30px; font-size:14px; display:inline-block; cursor:pointer; margin-right:-3px; *display:inline; zoom:1; padding-left:10px; padding-right:10px; border-radius:4px 4px 0 0; }
  .tab_header a,a:hover { text-decoration:none; }
  .tab_header:hover { background:#F5F5F5; }
  .tab_header_group .active { margin-bottom:0px; background:gray; color:#fff; }
  .tab_body { margin-top:1px; display:none; }
  .tab_body_group .active { display:block; }
 </style>
</head>
<body>
<div id="tabContainer">
 <ul class="tab_header_group">
  <li class="tab_header"><a href="#tab1" >首页1</a></li>
  <li class="tab_header"><a href="#tab2" >首页2</a></li>
  <li class="tab_header active"><a href="#tab3" >首页3</a></li>
  <li class="tab_header"><a href="#tab4" >首页4</a></li>
  <li class="tab_header"><a href="#tab5" >首页5</a></li>
 </ul>
 <div class="tab_body_group">
  <div id="tab1" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab1
  </div>
  <div id="tab2" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab2
  </div>
  <div id="tab3" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab3
  </div>
  <div id="tab4" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab4
  </div>
  <div id="tab5" class="tab_body" style="width:100%; height:200px; background:#F2F2F2;">
   tab5
  </div>
 </div>
</div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
让iframe框架网页在任何浏览器下自动伸缩
Aug 18 Javascript
jquery下jstree简单应用 - v1.0
Apr 14 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 Javascript
js按条件生成随机json:randomjson实现方法
Apr 07 Javascript
使用JQ完成表格隔行换色的简单实例
Aug 25 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
不用一句js代码初始化组件
Jan 27 #Javascript
You might like
PHP 判断常量,变量和函数是否存在
2009/04/26 PHP
关于php mvc开发模式的感想
2011/06/28 PHP
input的focus方法使用
2010/03/13 Javascript
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
2014/05/08 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
微信js-sdk上传与下载图片接口用法示例
2016/10/12 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
2017/02/09 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
Vue学习之路之登录注册实例代码
2017/07/06 Javascript
基于AngularJS的拖拽文件上传的实例代码
2017/07/15 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
详谈Python基础之内置函数和递归
2017/06/21 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
django定期执行任务(实例讲解)
2017/11/03 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
基于Python爬取京东双十一商品价格曲线
2020/10/23 Python
浅谈盘点5种基于Python生成的个性化语音方法
2021/02/05 Python
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
实习生自我鉴定
2013/12/12 职场文书
财务情况说明书范文
2014/05/06 职场文书
校长创先争优承诺书
2014/08/30 职场文书
论文答辩开场白大全
2015/05/27 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
SpringBoot详解执行过程
2022/07/15 Java/Android