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 相关文章推荐
js局部刷新页面时间具体实现
Jul 04 Javascript
js/jQuery简单实现选项卡功能
Jan 02 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
详谈LABJS按需动态加载js文件
May 07 Javascript
深入浅析react native es6语法
Dec 09 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
AngularJS中的拦截器实例详解
Apr 07 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
Aug 17 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
Jun 28 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP 编写的 25个游戏脚本
2009/05/11 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
Laravel框架实现多数据库连接操作详解
2019/07/12 PHP
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
JS中去掉array中重复元素的方法
2017/05/26 Javascript
vue引入swiper插件的使用实例
2017/07/19 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
Vue表单提交点击事件只允许点击一次的实例
2020/10/23 Javascript
python实现对一个完整url进行分割的方法
2015/04/29 Python
浅析Python中的join()方法的使用
2015/05/19 Python
Python中返回字典键的值的values()方法使用
2015/05/22 Python
Python中getpass模块无回显输入源码解析
2018/01/11 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
简单了解Python write writelines区别
2020/02/27 Python
python怎么调用自己的函数
2020/07/01 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
W3C公布最新的HTML5标准草案
2008/10/17 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
《小猪家的桃花树》教学反思
2014/04/11 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
初二数学教学反思
2016/02/17 职场文书
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL
nginx 添加http_stub_status_module模块
2022/05/25 Servers