<!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. mac brew install redis 报错

    mac brew install redis 报错 /usr/local/opt/php55/bin/phpize /usr/local/opt/php55/bin/phpize: line 61: ...

  2. 【krpano】krpano xml资源解密（破解）软件说明与下载

    欢迎加入qq群551278936讨论krpano技术以及获取最新软件.   最新版本软件下载:http://www.cnblogs.com/reachteam/p/5455675.html 该软件已经 ...

  3. SVN上传文件提示磁盘空间不足的问题

    SVN上传文件大于100M,提示:Commit failed (details follow):While preparing 'E:\AFCData\tjsc20db_table.sql' for ...

  4. AngularJS的JSONP服务

    有些页面的response中,包含了 Access-Control-Allow-Origin 这个header,说明可以进行跨域请求,如果没有包含这个header的页面可以利用JSONP进行跨域 sc ...

  5. ubuntu 16.04 设置位wifi热点 方法（手机可链接）亲测可用

    Ubuntu16.04里面可以直接创建热点,而不用像以前的版本,还要其他辅助工具. 具体步骤如下: 1. 点击有上角网络标志,点开编辑链接. 2. 选择 WiFi ,添加一个网络. 3.设置这个网络 ...

  6. RISC指令集的五个周期

    RISC指令集的五个周期 RISC(reduced instruction set computer,精简指令集计算机)简称为精简指令集.RISC把执行指令的精力主要放在了经常使用的指令上面.本文主要 ...

  7. 字符串数组初始化0 与memset 0 效率的分析

    转自:http://www.xuebuyuan.com/1722207.html 结合http://blog.sina.com.cn/s/blog_59d470310100gov8.html来看. 最 ...

  8. 代理模式/proxy模式/结构型模式

    代理模式proxy 定义 为其他对象提供一种代理,并以控制对这个对象的访问.最简单的理解,买东西都是要去商店的,不会去工厂. java实现三要素 proxy(代理)+subject(接口)+realS ...

  9. div滚动底部加载li,window滚动底部加载li

    DIV固定高度滚动条滚动最底部,加载新的li <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  10. include、merge 、ViewStub

    在布局优化中,Androi的官方提到了这三种布局<include />.<merge />.<ViewStub />,并介绍了这三种布局各有的优势,下面也是简单说一 ...