jquery導航顯示和隱藏多個頁面

被要求製作SPA披薩店並遇到顯示和隱藏功能的問題。僅在主頁顯示在任何時候都jquery導航顯示和隱藏多個頁面

<nav> 
 
     <div> 
 
      <ul> 
 
       <li><a href="#home" id="navHome" class="links" rel="Home">Sicilian Home</a></li> 
 
       <li><a href="#menu" id="navMenu" class="links" rel="Menu">Sicilian Menu</a></li> 
 
       <li><a href="#about" id="navAbout" class="links" rel="About">Sicilian About</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

$(document).ready(function() 
     { 
      $("navHome").click(function (event) { 
       $("home").show(); 
       $("menu", "about").hide(); 
      }); 
       $("navMenu").click(function (event) { 
        $("menu").show(); 
        $("about", "home").hide(); 
       }); 
       $("navAbout").click(function (event) { 
        $("about").show(); 
        $("home", "menu").hide(); 

       }); 
      }

來源

2015-02-24 Ant

如果任何人都可以提出一個可以幫助我的建議，一直坐在這裏一段時間，並且確定這是一件簡單的事情，而且在我的臉上，但是已經看了太久。 – Ant 2015-02-24 19:00:15

你的選擇器是錯誤的，你應該包含哈希符號。例如：#home，#menu，#about – slashsharp 2015-02-24 19:02:10

仍然只顯示那個家。有人告訴我，它可能是document.ready和其他人都說可能是因爲裏面有對方，而不是在同一水平... – Ant 2015-02-24 19:04:09

你的CSS選擇器是不正確的。基於您的HTML，你需要使用ID選擇：

$("#navHome").click(function (event) { 
    $("#home").show(); 
    $("#menu, #about").hide(); 
}); 
$("#navMenu").click(function (event) { 
    $("#menu").show(); 
    $("#about, #home").hide(); 
}); 
$("#navAbout").click(function (event) { 
    $("#about").show(); 
    $("#home, #menu").hide(); 
});

而且是有區別的：$("menu", "about")的意思是「發現菜單標籤中關於標籤」，而$("#menu, #about")意味着「找到ID菜單和元素元素有關的ID」。

來源

2015-02-24 19:14:32 dfsq

謝謝，是的，我改變了＃發佈後，但仍然只看到只有家庭div – Ant 2015-02-24 23:31:50

這裏是你的演示：http://jsfiddle.net/x30w541b/ – dfsq 2015-02-25 06:28:53

我複製了你的javascript和html來模擬這個問題。我在函數中添加了警報語句，以檢查是否首先捕獲了單擊事件。但是，警報聲明本身並沒有出現。

你需要做以下兩個更改您的腳本工作：

前綴#用的ID來捕獲點擊事件
關閉)缺少在腳本結束

請看以下最終腳本：

$(document).ready(function() 
    { 
     $("#navHome").click(function (event) { 
      $("home").show(); 
      $("menu", "about").hide(); 
     }); 
     $("#navMenu").click(function (event) { 
      $("menu").show(); 
      $("about", "home").hide(); 
     }); 
     $("#navAbout").click(function (event) { 
      $("about").show(); 
      $("home", "menu").hide(); 
     }); 
    } 
)

來源

2015-02-25 03:39:41 Mithun

jquery導航顯示和隱藏多個頁面

回答

相關問題