1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style>
  7.             .tabulous_active{
  8.                 border: 1px solid blue;
  9.             }
  10.         </style>
  11.         <script src="js/jquery.js"></script>
  12.     </head>
  13.     <body>
  14.     <div id="meeting_tabs">
  15.         <ul>
  16.               <li class="tabulous_active"><a href="#" title="">全部</a></li>
  17.               <li><a href="#" title="">未开始</a></li>
  18.               <li><a href="#" title="">已结束</a></li>
  19.                <li><a href="#" title="">进行中</a></li>
  20.         </ul>
  21.            <div id="tabs_container">
  22.             <div  class="pane">1</div>
  23.             <div  class="pane">2</div>
  24.             <div  class="pane">3</div>
  25.             <div  class="pane">4</div>
  26.           </div>
  27.     </div>
  28.  
  29.     <script>
  30.         $('#meeting_tabs>ul li').click(function(){
  31.             $(this).addClass('tabulous_active').siblings().removeClass('tabulous_active');
  32.             var num = $(this).index();
  33.             if(num == 0){
  34.                 $('#tabs_container .pane').show();
  35.             }else{
  36.                 $('#tabs_container .pane').eq(num).show().siblings().hide();
  37.             }
  38.          });
  39.     </script>
  40.     </body>
  41. </html>

jQuery简单tab按钮切换的更多相关文章

  1. jQuery|简单tab栏切换

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  3. jquery实现tab页切换显示div

    1.jQuery实现tab切换显示代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" &q ...

  4. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  5. jQuery实现tab标签切换效果

    技巧一.jQuery :eq() 选择器 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其 ...

  6. jQuery图片tab栏切换

    <script> $(function(){ $('.tab li').mouseenter(function(){ var $this=$(this); var index=$this. ...

  7. 不用jquery实现tab页切换，刷新，后退，前进状态自动维护 很好用

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

  8. jquery 简单的栏目切换

    <style> ul{ list-style:none; padding:0px; margin:0px;} #nav_box{ width:502px; height:402px; ov ...

  9. jQuery----jquery实现Tab键切换

    使用Jquery实现tab键切换,代码简洁易懂,实现逻辑清晰明了.具体总结如下: 需求分析: 鼠标进入tab切换模块,鼠标当前的模块上边框变为红色,并显示对应的商品名称.鼠标离开后,上边框恢复原色,图 ...

随机推荐

  1. java中移位操作

    /** * * @author SunRain *2013-10-14 8:09:50 *在最后一个移位运算中,结果没有直接付给b,而是直接打印出来,所以结果是正确的, *其他的是会被先转换成int型 ...

  2. UI Framework-1: views Windowing

    views Windowing views provides support for creating dialog boxes and other kinds of windows through ...

  3. 装了ubuntu后笔记本电脑的无线网卡用不了，怎么设置？

    百度经验的一篇文章 http://jingyan.baidu.com/article/ca2d939dd4f1b4eb6c31ce09.html 点击右上角的齿轮,选择“系统设置”   点击“软件和更 ...

  4. 题解 P2431 【正妹吃月饼】

    假如做这道题想着用如下朴实的模拟,那肯定要WA至少4个点. #include <iostream> #include <cstdio> using namespace std; ...

  5. 【习题 8-18 UVA - 1619】Feel Good

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 用单调队列求出l[i]和r[i] 分别表示i的左边最近的大于a[i]的数的位置以及i右边最近的大于a[i]的数的位置. 则l[i]+ ...

  6. 荣耀A55高调上市仅仅为孤独求败？

        坦白说.华为近年来在手机市场上确实取得了一些成绩.比方之前P6的出现就凭借超薄的设计.突出的性价比让大家看到了国产手机的新希望.按理说.在手机市场上尝到甜头的华为应该继续坚持低价.亲民的路线, ...

  7. 第六课 Struts的视图组件

    Struts框架的视图负责为客户提供动态网页内容. Struts的视图主要由JSP网页构成.此外还包含客户化的标签和ActionForm Bean.这些组件提供了 对国际化.接收用户输入的表单数据.表 ...

  8. BZOJ5105: [CodePlus2017]晨跑

    [传送门:BZOJ5105] 简要题意: 给出a,b,c,求a,b,c的最小公倍数 题解: 直接搞(最近刷水题有点心态爆炸) 参考代码: #include<cstdio> #include ...

  9. xml Data Type Methods in sql server

    nodes() Method (xml Data Type) https://docs.microsoft.com/en-us/sql/t-sql/xml/nodes-method-xml-data- ...

  10. google浏览器修改网页字符编码

    google浏览器修改网页字符编码 直接在google浏览器的应用拓展程序里面搜 Charset,第一个就是 于是就有了