class 标签切换

<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 属性有效 保留退路.
  });
});