当前位置：首页 > jquery

jquery导航

2026-01-14 15:04:08jquery

jQuery 导航实现方法

使用 jQuery 实现导航菜单

jQuery 提供了多种方法来实现导航菜单的交互效果，如滑动、淡入淡出或高亮显示当前页面。以下是一个简单的导航菜单实现示例：

<ul class="nav-menu">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

$(document).ready(function() {
  $('.nav-menu li a').click(function(e) {
    e.preventDefault();
    $('.nav-menu li a').removeClass('active');
    $(this).addClass('active');

    // 平滑滚动到对应部分
    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 500);
  });
});

响应式导航实现

对于移动设备，可以创建一个可折叠的响应式导航：

jquery导航

<button class="menu-toggle">Menu</button>
<ul class="nav-menu">
  <li><a href="#home">Home</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#services">Services</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

$(document).ready(function() {
  $('.menu-toggle').click(function() {
    $('.nav-menu').slideToggle();
  });

  // 窗口大小改变时调整导航
  $(window).resize(function() {
    if ($(window).width() > 768) {
      $('.nav-menu').show();
    }
  });
});

下拉菜单实现

为导航添加下拉菜单功能：

<ul class="nav-menu">
  <li><a href="#home">Home</a></li>
  <li class="has-dropdown">
    <a href="#products">Products</a>
    <ul class="dropdown">
      <li><a href="#product1">Product 1</a></li>
      <li><a href="#product2">Product 2</a></li>
    </ul>
  </li>
</ul>

$(document).ready(function() {
  $('.has-dropdown').hover(
    function() {
      $(this).find('.dropdown').stop(true, true).slideDown(200);
    },
    function() {
      $(this).find('.dropdown').stop(true, true).slideUp(200);
    }
  );
});

高亮当前页面导航项

jquery导航

自动高亮显示当前所在页面的导航项：

$(document).ready(function() {
  var path = window.location.pathname;
  path = path.replace(/\/$/, "");
  path = decodeURIComponent(path);

  $('.nav-menu a').each(function() {
    var href = $(this).attr('href');
    if (path.substring(0, href.length) === href) {
      $(this).addClass('active');
    }
  });
});

CSS 配合 jQuery 导航

为上述 jQuery 导航添加基本样式：

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-menu li {
  display: inline-block;
  position: relative;
}
.nav-menu a {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
}
.nav-menu a.active {
  color: #fff;
  background: #007bff;
}
.dropdown {
  display: none;
  position: absolute;
  background: #fff;
  min-width: 160px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  .nav-menu {
    display: none;
  }
  .nav-menu li {
    display: block;
  }
}

这些方法提供了使用 jQuery 实现各种导航功能的基础，可以根据具体需求进行调整和扩展。

标签: jquery