溫馨提示×

jquery怎么實現(xiàn)菜單隨著內(nèi)容切換

小億
132
2023-08-10 05:14:27
欄目: 編程語言

要實現(xiàn)菜單隨著內(nèi)容切換，你可以使用jQuery來監(jiān)聽內(nèi)容的變化并相應(yīng)地改變菜單項的狀態(tài)或樣式。

以下是一個簡單的示例代碼：

<!DOCTYPE html>
<html>
<head>
  <title>菜單切換</title>
  <style>
    .menu-item {
      display: none;
    }
    .active {
      display: block;
    }
  </style>
</head>
<body>
  <ul class="menu">
    <li class="menu-item active">菜單1</li>
    <li class="menu-item">菜單2</li>
    <li class="menu-item">菜單3</li>
  </ul>
  <div class="content">
    <div class="content-item active">內(nèi)容1</div>
    <div class="content-item">內(nèi)容2</div>
    <div class="content-item">內(nèi)容3</div>
  </div>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      // 監(jiān)聽菜單項點擊事件
      $('.menu-item').click(function() {
        // 移除所有菜單項的 active 類
        $('.menu-item').removeClass('active');
        // 添加當(dāng)前菜單項的 active 類
        $(this).addClass('active');
        // 獲取當(dāng)前菜單項的索引
        var index = $(this).index();
        // 隱藏所有內(nèi)容項
        $('.content-item').hide();
        // 顯示對應(yīng)索引的內(nèi)容項
        $('.content-item').eq(index).show();
      });
    });
  </script>
</body>
</html>

在這個示例中，我們使用了一個包含菜單項和內(nèi)容項的簡單頁面結(jié)構(gòu)。初始狀態(tài)下，第一個菜單項和對應(yīng)的內(nèi)容項都被設(shè)置為 active 類，其他菜單項和內(nèi)容項則隱藏。

通過jQuery，我們監(jiān)聽了菜單項的點擊事件，并在點擊時執(zhí)行相應(yīng)的操作。當(dāng)點擊某個菜單項時，我們移除所有菜單項的 active 類，并將當(dāng)前點擊的菜單項添加 active 類。同時，我們獲取當(dāng)前點擊菜單項的索引，然后隱藏所有內(nèi)容項并顯示對應(yīng)索引的內(nèi)容項。

這樣，每次點擊菜單項時，就會相應(yīng)地切換菜單和內(nèi)容的狀態(tài)。


0 踩