<!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=utf8" />

 <title>tab</title>

 <script src="jquery.js" type="text/javascript"></script>

 <script language="javascript">

     $(document).ready(function(){

         setTab('news');

     });

     function setTab(tab_id, show_index, tab_class, panel_class){

         var $tabs = $('#' + tab_id + ' .tab_item');

         var $panels = $('#' + tab_id + ' .panel_item');

         $tabs.each(function(index_tab){

             $(this).click(function(){

                 $tabs.removeClass('tab_active');

                 $(this).addClass('tab_active');

                 var now_tab_index = $tabs.index(this);

                 $panels.removeClass('panel_active');

                 $($panels[now_tab_index]).addClass('panel_active');

                 /*$tabs.each(function(tab_index){

                     if($(this).hasClass('active')){

                         $panels.removeClass('active');

                         $($panels[tab_index]).addClass('active');

                     }

                 });*/

             });

         });

     }

 </script>

 </head>

 <body>

 <style>

     ul{margin:0; padding:0;}

     li{ list-style: none; display: inline-block; }

     .panel_item{display: none;}

     .tab_active{display: inline-block; background: #cccccc;}

     .panel_active{display: block;}

 </style>

 <div id="news">

     <ul class="tab">

         <li class="tab_item tab_active">tab1</li>

         <li class="tab_item">tab2</li>

         <li class="tab_item">tab3</li>

     </ul>

     <div class="panel">

         <div class="panel_item panel_active">1</div>

         <div class="panel_item">2</div>

         <div class="panel_item">3</div>

     </div>

 </div>

 </body>

 </html>

jquery的index()函数使用 [1] [2]

其它jquery tab的插件 [1] [2]

简单的jquery tab的更多相关文章

  1. jQuery Tab选项卡切换代码

    jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...

  2. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

  3. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

  4. jquery tab 插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery - 1.简单的JQuery

    1.简单的JQuery 2.jQuery对象(包装集).Dom对象 3.JQuery提供的函数 1.简单的JQuery $(document).ready(function () { alert(&q ...

  6. jquery tab

    jquery tab <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...

  7. 编写一个简单的Jquery插件

    1.实现内容 定义一个简单的jquery插件,alert传递进来的参数 2.插件js文件(jquery.showplugin.js) (function ($) { //定义插件中的方法 var me ...

  8. 20 个最棒的 jQuery Tab 插件

    jQuery Tab 常用来做网页上的选项设置界面和导航,本文向你推荐最棒的 20 个 jQuery Tab 插件.Enjoy !! 1. Slider Tabs SliderTabs 是一个可定制的 ...

  9. jquery Tab默认情况下自动切换

    <!DOCTYPE html><html lang="zh-CN"><head><meta http-equiv="Conten ...

随机推荐

  1. Magento 新增字段的值读写丢失原因

    某实体新增字段handreturn_status,欲操作之: $order_info = Mage::getModel('sales/order')->load($order_id); //se ...

  2. vim编辑技巧

    算上大学上课linux接触四年了,可惜除了工作接触的那些,其他地方还是很水的,都不精通,今日翻来看了看以前过目即忘的vim技巧,发现,如无几年操作经验,这些技巧很难领悟的.这里写下来,以备后查. 区块 ...

  3. STL_lower_bound&upper_bound用法

    ForwardIter lower_bound(ForwardIter first, ForwardIter last,const _Tp& val)算法返回一个非递减序列[first, la ...

  4. vue学习

    2016年12月2日 今天学习Vue.js,对于未知的知识,一脸懵逼.记录学习新知识的路程,为以后学习更多的新知识一个引导.以后学会了之后再回来看看, 回忆一下会与不会的区别在哪.这样以后学习可以更快 ...

  5. 腾讯QQ形象18年变迁史，最早的QQ企鹅形象居然长这样！

    1999年,腾讯创建之初,这是当时QQ的形象,现在看起来很滑稽,又高又瘦.当时公司并没有专职的设计师,所以这个形象就凑合着用了. 后来,腾讯也觉着上一个形象做的不是特别好,于是在2000年的时候,公司 ...

  6. JS中多种方式创建对象

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function ...

  7. October 24th Week 44th Monday 2016

    True love stories never have endings. 真正的爱情故事永远没有结局. It seems I have been customed to the single lif ...

  8. PHP语句【变量、运算符表达式、语句】

    一.变量的方法.1.empty可以用empty的方法能够判断变量的值是不是为空.①如果我们看一下某一个变量是不是已经存在过了假如我们输出一下 var_dump (empty($a)); 返回值为tru ...

  9. 深入Java核心 Java中多态的实现机制(1)

    在疯狂java中,多态是这样解释的: 多态:相同类型的变量,调用同一个方法时,呈现出多中不同的行为特征, 这就是多态. 加上下面的解释:(多态四小类:强制的,重载的,参数的和包含的) 同时, 还用人这 ...

  10. Macbook Pro 使用小记

    本周到手Macbook Pro,很激动.刚刚使用了几天,简单记下自己的感受.   Macbook Pro的硬件配置和做工真没得说,非常完美. 触控板很强大.很好用,鼠标可以基本不用了,但要稍微学习一下 ...