<!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. NHibernate3快速上手教程FluentNHibernate配置与DBHelper

    很多学习NHibernate的新手很容易卡在配置文件这一关,正所谓万事开头难,上手后再配合官方文档就比较容易了. 网上关于配置文件的资料非常多,但由于版本的问题,许多老的教程中都没有明确指出类库的版本 ...

  2. K型热电耦高精度分段线性拟合（C语言）

    extern float GetTempOfVolMi(float V){ float K,B; if(0.03947 <= V < 2.02308) //0~50 {  K = 24.7 ...

  3. myeclipse（2015）中创建简单的Maven项目的步骤（用于生成可执行jar文件）------》myeclipse2015

    利用MyEclipse的引导,可以很方便的创建简单的.用于生成可执行jar文件的Maven项目: 1.New -> Project... 选择 Maven Project, 点击Next > ...

  4. MySQL 编译安装并且开启DEBUG模式

    因为想分析下mysql中一些操作的内部执行过程,单纯的看源码太枯燥了,所以决定结合mysql的执行过程来分析,mysql作为一款成熟的数据库软件,在设计的时候就考虑到了调试的问题,只是想开启调试模式的 ...

  5. Java Web技术之JSP与EL表达式

    1,jsp是用来干嘛的? JSP技术是用来解决在Servlet中需要书写大量的拼接html标签.以及框架的代码 2,jsp的三种脚本元素 a.JSP的脚本声明(定义) 格式: <%! 书写Jav ...

  6. 为何Redis要比Memcached好用（转）

    转载链接:http://blog.csdn.net/renfufei/article/details/40598889 GitHub版本地址: https://github.com/cncounter ...

  7. Python 中xrange和range区别

    先看看Python help()的说明 help(range) Help on built-in function range in module __builtin__: range(...) ra ...

  8. 【Java EE 学习 47】【Hibernate学习第四天】【sesion】【一级缓存】【懒加载】

    一.Session概述 1.Session 接口是 Hibernate 向应用程序提供的操纵对数据库的最主要的接口, 它提供了基本的保存, 更新, 删除和加载Java 对象的方法. 2.理解Sessi ...

  9. Smooth Mouse

    一款免费软件,使mac可以做到和 Windows 下的鼠标加速度的相同算法,实现同样 win 的鼠标操控感,也可以实现鼠标0加速度.

  10. VS2015 自动添加头部注释

    让VS自动生成类的头部注释,只需修改两个文集即可,一下两个路径下个有一个 Class.cs文件 D:\Program Files (x86)\Microsoft Visual Studio 14.0\ ...