jquery使用按鈕顯示/隱藏多個div

對不起，提出一個非常基本的問題，我對jquery很新。我有下面這段HTML的jquery使用按鈕顯示/隱藏多個div

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Div</title> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
</head> 
<body> 
    <nav> 
    <div id='menu'> 
    <img src='img/Navigation/home.png' title='Home' alt='' /> 
    <img src='img/Navigation/info.png' id="aboutUs" title='About Us' alt='' /> 
    <img src='img/Navigation/gallery.png' id="portfolio" title='Portfolio' alt='' /> 
    <img src='img/Navigation/facebook.png' title='Follow us' alt='' /> 
    <img src='img/Navigation/contact.png' id="contactUs" title='Contact Us' alt='' /> </div> 
    </nav> 
    <div style="clear:both"></div> 
    <div id="contactUs" style="height:300px; width:300px; background-color:#999; display:none;">Contact Us</div> 
    <div id="portfolio" style="height:300px; width:300px; background-color:#999; display:none;">Portfolio</div> 
    <div id="aboutUs" style="height:300px; width:300px; background-color:#999; display:none;">About Us</div> 
</body> 
</html>

我想說明聯繫我們，投資組合和公司簡介的div來顯示在點擊相應的按鈕。

我在網上搜索了大量的例子，但仍然無法使它工作。

來源

2013-05-07 user2359466

顯示什麼你寫。 – 2013-05-07 18:20:40

你沒有任何按鈕 – smerny 2013-05-07 18:20:51

你有多個元素具有相同的ID – smerny 2013-05-07 18:22:41

$("#content > div").hide(); 

$("#menu a").click(function(){ 
    $("div#" + $(this).attr("id")).show(); 
});

你必須使用相同的id您img標籤和您的div標籤問題

嘗試是這樣的：

<body> 
    <nav> 
     <div id='menu'> 
      <a><img src='img/Navigation/home.png' title='Home' alt='' /> 
      <a href="#contactUs"><img /></a> 
      <a href="#portfolio"><img /></a> 
     </div> 
    </nav> 
    <div style="clear:both"></div> 
    <div id="content"> 
     <div id="contactUs">Contact Us</div> 
     <div id="portfolio">Portfolio</div> 
     <div id="aboutUs">About Us</div> 
    </div> 
</body>

$("#content > div").hide(); 

$("#menu a[href]").click(function(){ 
    $("#content " + $(this).attr("href")).show().siblings().hide(); 
});

來源

2013-05-07 18:22:02 hunter

非常感謝獵人的代碼很好。我想知道是否有任何方法可以刪除'a'標籤並直接從img中運行。 a標籤正在UI中進行不必要的刷新。 – user2359466 2013-05-07 18:53:45

現在我在HTML中添加了，並且想要隱藏當前打開的DiV。該腳本現在看起來\t $（函數（）{ \t $（「＃含量> DIV」）隱藏（）; \t $（「＃菜單[HREF]」）點擊（函數（） { $（「＃內容」 + $（本）.attr（「HREF」））顯示（）兄弟姐妹（）隱藏（）;。 \t}）; \t \t \t $（「＃家」）.click（function（）{ \t \t $（「＃content> div」）。hide（）; \t}）; }）; 這不起作用。我做錯了什麼？ – user2359466 2013-05-07 19:25:09

jquery使用按鈕顯示/隱藏多個div

回答

相關問題