jquery 侧边导航菜单

梦馨娴 3个月前 40浏览 0评论

jQuery侧边导航菜单是一种非常实用的Web设计元素,特别适合用于大型或复杂的网站,用于快速导航至不同的内容页面。

示例代码如下:

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
   ul {
      list-style:none;
      padding:0;
      margin:0;
   }
   li {
      padding:5px;
      cursor:pointer;
   }
   .active {
      background-color: #ccc;
   }
</style>
</head>
<body>
   <ul>
      <li class="active">Home</li>
      <li>About</li>
      <li>Contact</li>
   </ul>
   <script>
      $('li').click(function(){
         $('li').removeClass('active');
         $(this).addClass('active');
      });
   </script>
</body>
</html>

代码中,我们首先定义了一个包含三个列表项(Home、About和Contact)的无序列表。然后使用jQuery代码添加了点击事件,在鼠标单击列表项时,删除已经选中的类(通过removeclass)并将该列表项添加上选中的类(addClass)。在CSS样式表中,我们定义了列表项的样式,以及选中样式的背景色。

通过以上方法,我们可以快速创建美观实用的jQuery侧边导航菜单,帮助用户更好地使用网站。