实现鼠标滑过时tabs内容切换

这是一篇严肃的笔记，上代码：

//html部分

<div class="main_pro">
      <ul class="tab_menu">
          <li class="current">menu_1</li>
         <li>menu_2</li>
         <li>menu_3</li>
      </ul>

    <div class="tab_box">
        <div>content1</div>
        <div class="hide">content2</div>
        <div class="hide">content3</div>
  </div>
</div>

//必要的css，其他的自己调

.current{display:block;}

//js部分

//获取每个内容
  var tabBox=$("div.tab_box").children("div");
        $("#main_pro .tab_menu li").mouseover(function(){
            var lis=$(this);
            lis.siblings("li")
            .removeClass("current")
            .end()
            .addClass("current");
            
            tabBox.siblings("div")
            .addClass("hide")
            .end()
            .eq(lis.index())      //根据当前li的index指取得对应的内容
            .removeClass("hide");
            
        });

就这样。