tab切换，滑动门

最新推荐文章于 2021-05-31 08:59:46 发布

转载最新推荐文章于 2021-05-31 08:59:46 发布 · 104 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xqschool/p/6033156.html

本文介绍了一个使用jQuery实现的菜单切换效果示例。当鼠标悬停在不同菜单项上时，对应的展示区域会显示相关内容，同时隐藏其他内容。该示例通过自定义函数实现了菜单与内容之间的联动，并展示了如何利用jQuery简化DOM操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<SCRIPT type=text/javascript>
jQuery(document).ready(function () {
          changediv(["#ha1","#ha2"],["#hw1","#hw2"],"one")
    })

function changediv(menus,divs,opclass){
      if(menus.length != divs.length){
          alert("菜单个数与内容痛");
          return false;
          }
   for(var i=0; i<menus.length;i++){
       $(menus[i]).mouseover(function(){
              //alert("你搞错没有啊");
           // $(this).addClass(opclass).siblings().removeClass("one")
           for(var j=0; j<menus.length; j++){
               $(menus[j]).removeClass(opclass);
               $(divs[j]).css("display","none");
               }
           //$(this).addClass(opclass);
           $(this).addClass(opclass)
           $(divs[$(this).index()]).css("display","block");
           })

       }

      }
</SCRIPT>

 jQuery(document).ready(function () {

var SDmodel = new scrollDoor();

SDmodel.sd(["an1", "an2","an3","an4","an5","an6"],["adr1", "adr2", "adr3","adr4","adr5","adr6"],"one");


    })

转载于:https://www.cnblogs.com/xqschool/p/6033156.html