实现鼠标滑过时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");
            
        });

就这样。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,860评论 1 92
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 2,239评论 0 8
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,995评论 24 450
  • 第一部分HTML&CSS整理答案1.什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HTML5...
    Programmer客栈阅读 2,048评论 0 12
  • 流放,被流放在我的世界 我的世界繁华无尽却也荒凉黯淡 我渴望有一道光似闪雷般炸裂开来 我渴望这光有太阳般的炙热来融...
    春风风人阅读 305评论 2 6