<!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. SQL操作记录查看工具

    [1]SQL Server Profiler就是一个Sql的监视工具,可以具体到每一行Sql语句,每一次操作,和每一次的连接 [2] 做数据交互时,往往很难直观的看到最后在数据库中执行的SQL语句.此 ...

  2. 6.openstack之mitaka搭建网络节点

    部署网络服务 一:控制节点配置 1.建库建用户 mysql -u root -p CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neutron.* ...

  3. ASP.NET MVC随想录——漫谈OWIN

    什么是OWIN OWIN是Open Web Server Interface for .NET的首字母缩写,他的定义如下: OWIN在.NET Web Servers与Web Application之 ...

  4. yii2.0 框架邮件的发送

    第一步: 在main-local.php中的components中配置mailer: $config = [ 'components' => [ 'mailer' => [ 'class' ...

  5. TFS二次开发系列：三、TFS二次开发的第一个实例

    首先我们需要认识TFS二次开发的两大获取服务对象的类. 他们分别为TfsConfigurationServer和TfsTeamProjectCollection,他们的不同点在于可以获取不同的TFS ...

  6. pm2无法自动重启

    在服务器上有个上传文件的服务,之前是pm2启动,每当有文件上传会自动重启 现在为了应对服务器宕机,我把启动脚本放在了另一文件夹内,所以就无法自动重启, 原文在 http://pm2.keymetric ...

  7. tensorflow的安装

    binary安装(推荐) 注意需要能访问外网 Install pip (or pip3 for python3) if it is not already installed: # Ubuntu/Li ...

  8. [MVC学习笔记]5.使用Controller来代替Filter完成登录验证（Session校验）

          之前的学习中,在对Session校验完成登录验证时,通常使用Filter来处理,方法类似与前文的错误日志过滤,即新建Filter类继承ActionFilterAttribute类,重写On ...

  9. 【MyEcplise】build workspace卡死

    1.window-Perferences-MyEclipse-Validation 将Manual全部勾掉,Build只留Classpath DependencyValidator,其它全部勾掉. 2 ...

  10. pat甲级题解(更新到1013)

    1001. A+B Format (20) 注意负数,没别的了. 用scanf来补 前导0 和 前导的空格 很方便. #include <iostream> #include <cs ...