首先你得确保你是菜鸟级别的.然后不排除有大鸟也想看看.
那么都一起往下看吧. 嘿嘿.
最近在做东西的时候自己写的,相当之菜鸟, 稍微的牛叉的, 就是用了jquery.

写作的过程还是蛮享受的, 不知道jquery UI 里面有么有这个效果, 有空 咨询一下我哥, 把这个做成一个插件就牛逼了.^_^

有更好的实现方法可以tell  me 呢.

标签切换效果

• 1.第一步确保你的代码里有加载jquery裤~~~^_^
• 2.然后很傻逼的将下面的代码复制到你的html页面内.

  <div id="gro-popular" class="mod-gro-light">
    <div class="title hasTab"> <!-- hasTab 激活tab功能 -->
      <h2>Title</h2>
      <ul class="tabs"> <!-- tab_1 tab_2,以此类推,可以是其他名字, 确保统一,以便重用 -->
        <li class="tab_1 current"><a href="#">Tab1</a></li>
        <li class="tab_2"><a href="#">Tab1</a></li>
        <li class="tab_3 unable"><a href="#">Tab2</a></li>
      </ul>
    </div>
  <div class="content tab_1">content1</div>  <!-- tab_1 跟上面的要对应才可显示出来,不然会显示不出来^_^ -->
  <div class="content tab_2">content2</div>
  </div>

• 3.然后新建个js文件,或者直接在html上加这个js也可以(不推荐,很傻逼)粘下面的一段代码

  $(document).ready(function(){  // jquery语法 加载完毕后运行
  $('.hasTab li a').click(function(){  //('.hasTab li a') 给li下的 a 标签添加动作.
      var cur = $(this).parent('li');  // 获取 当前 li 对象 以便 添加 current 样式
      var tab = $(this).parent('li').siblings('li'); // 获取 所有同辈 li 用以 清除 current 样式
      var content = $(this).parents('.title:first').siblings('.content'); // 获取 包含内容的所有 content 对象
      if(!cur.hasClass('current') && !cur.hasClass('unable')){ // 是否 是 选中状态current 或者 无用状态 unable
  var attr = '.'+ cur.attr('class'); //获取 li 的class名 如: tab_1
        tab.removeClass('current'); //清除 current 样式
        cur.addClass('current'); //添加 current 样式
        content.hide(); //隐藏所有content
        content.siblings(attr).show(); //显示 目标 content
        return false; //返回 false 使a 属性无效
      }
      return true; //返回 true 使a 属性有效 保留退路.
    });
  });
  

• 4.然后… 对然后还有样式,不然傻逼一样就显示一个骨架怎么看. 我找找.

  /****** mod-gro-light ******/
  
  .mod-gro-light{
    background:#fff;
  }
  .mod-gro-light .title{
      height:30px;
  }
    .mod-gro-light h2{
      display:none;
    }
    .mod-gro-light .tabs{
      height:30px;
      margin-bottom:-1px;
      position:relative;
    }
    .mod-gro-light .tabs li{
      float:left;
      margin-top:5px;
      height:25px;
      background:#ededed;
    }
      .mod-gro-light .tabs li a{
        float:left;
        padding:3px 8px 0;
        line-height:21px;
        color:#5e5d5d;
      }
      .mod-gro-light .hasTab a{
        *hide-focus: expression(this.hideFocus=true);
        outline:none;
      }
  
      .mod-gro-light .tabs li.current{
        margin-top:0px;
        border:1px solid #d6d6d6;
        border-bottom:0px;
        background:#fff ;
        padding:3px 3px 0;
    	  height:27px;
      }
      .mod-gro-light .tabs li span,
      .mod-gro-light .tabs li.current a{
        float:left;
        border-top:2px solid #dbdbdb;
        margin:0;
        padding:3px 5px 0;
        font-size:14px;
        line-height:22px;
        font-weight:bold;
        color:#595959;
      }
      .mod-gro-light .tabs li span{
        font-weight:bold;
        padding:0px 4px 0;
      }
        .mod-gro-light .tabs li strong{
          margin:0 3px;
          color:#ff0050;
          font-size:18px;
        }
  
  .mod-gro-light .content{
    background:#fff;
    border:1px solid #d6d6d6;
    _height:160px;
    min-height:160px;
    padding:4px;
  }
  
  

您可能还对这些日志感兴趣

• 闭包式 js架构 前端书写心得(上)
• 乱翻乱教- jQuery 制作N级导航菜单
• 滚动新闻 – jquery 扩展插件
• 三元运算符 使用小技巧一则 – javascript
• 神经特长 – lazy hover 延迟激活jquery 插件