<!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. js 的Location对象

    Location对象 location用于获取或设置窗体的URL,并且可以用于解析URL. 语法: location.[属性|方法] location对象属性图示: location 对象属性: ha ...

  2. JS将指定的时间戳转为UTC时间

    Js中获取时间戳可用var dayMiliseconds = parseInt(new Date().valueOf());Js的时间戳单位为毫秒(1s = 1000 ms),下面是一个将制定的格式转 ...

  3. Codeforces Round #365 (Div. 2)

    A题 Mishka and Game 水..随便统计一下就A了 #include <cstdio> #include <map> #include <set> #i ...

  4. HDU - 3948 后缀数组+Manacher

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3948 题意:给定一个字符串,求字符串本质不同的回文子串个数. 思路:主要参考该篇解题报告 先按照man ...

  5. js实现去重字符串

    实现去重字符串主要是把重复的字符与原来的字符(先push()进入一个数组存起来)相匹配,如果match返回的不是null则说明重复,就删除掉: <script> var str = pro ...

  6. C# 类动态添加属性、方法

    问题: 需要动态为WPF中的DataGrid添加列,并动态绑定相应数据.(此处仅实现动态属性的添加和使用,关于动态方法的添加和使用详见推荐阅读) 实现关键点: 目标类继承DynamicObject,添 ...

  7. 【BO】安装BO服务器时，oracle服务端安装ora-12514和12541的问题

    今天在安装BO服务器,oracle数据库时,出现了这样一个问题,描述如下: 首先安装oracle10g Server 32位版.安装ORCL数据库之后,使用10gServer下的NET MANAGER ...

  8. Working in Singapore

    这篇blog主要是想说说最近以及将来一年的时间需要在Singapore工作的感受.你可能以及猜到了,我现在写这篇blog是在Singapore的Office里面. 在一个月之前还在成都工作,每天9:0 ...

  9. 两个多项式相加 ( C++ )

    实现两个多项式进行相加 不开辟空间 ( 这要求实现进行相加,代价为两个原链表将被修改) 分析: this>other 就把other当前结点放置在this之前 this<other 就th ...

  10. MongoDB基本使用

    成功启动MongoDB后,再打开一个命令行窗口输入mongo,就可以进行数据库的一些操作. 输入help可以看到基本操作命令: show dbs:显示数据库列表 show collections:显示 ...