常见三级菜单

最新推荐文章于 2023-04-02 22:30:50 发布

最新推荐文章于 2023-04-02 22:30:50 发布 · 120 阅读

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

41 篇文章

订阅专栏

本文介绍如何使用jQuery实现页面元素的鼠标悬停事件触发，动态改变内容区域的显示内容，通过设置类名实现页面元素间的切换效果，增强用户体验。

核心jquery代码：

$(function(){

   $('.topH li').mouseenter(function(){
      var that = $(this);
   var index = $('.topH li').index(that);
   $('.topH li').removeClass('activeLi').eq(index).addClass('activeLi');
   $('#content .neirong').hide().eq(index).show();
//   var a = $('#content .neirong').eq(index).find('li').length;
      enterLi()
   })

   function enterLi(){
      $('#content .neirong:visible').find('li').hover(function(){
         var thatH = $(this);
      var $li = $('#content .neirong:visible').find('li');
      var indexH = $li.index(thatH);
      $li.find('h3').eq(indexH).addClass('activeH4');
      $li.find('.one').eq(indexH).addClass('activeDiv');
      },function(){
         var thatH = $(this);
      var $li = $('#content .neirong:visible').find('li');
      $li.find('h3').removeClass('activeH4');
   $li.find('.one').removeClass('activeDiv');
   })
   }

   enterLi()
})