jquery - 點擊鏈接不會改變div內容

我是Jquery的新手。我正在嘗試一個小例子。點擊鏈接不會更改div內容。我已經嘗試了下面的代碼，但它顯示了所有的div內容，並且當我點擊每個鏈接時它不會改變。例如，點擊'about'應顯示'div關於'並隱藏其他等等。jquery - 點擊鏈接不會改變div內容

我已經嘗試了互聯網上的所有解決方案，沒有什麼不適合我。請讓我知道我做了什麼錯誤。這將有很大的幫助。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Welcome</title> 
    <script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
</script> 

    <script type="text/javascript"> 

     $(document).ready(function(){ 
     $("#home").click(function(){ 
     $("#divHome").show(); 

     }); 

     $("#about").click(function(){ 
     $("divs").hide(); 
      $("#divAbout").show(); 
     }); 

     $("#help").click(function(){ 
      $("divs").hide(); 
      $("#divHelp").show(); 
     }); 

     }); 

    </script> 
    </head> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <body> 
     <div class="Maincontainer"> 
      <div class= "header"> 
      <h2 class="text-color">Info</h2> 
       <ul class="links"> 

        <li id="home"><a href="#home" class="link">Home</a></li> 
        <li id="about"><a href="#about" class="link" >About</a</li> 
        <li id="help"><a href="#help" class="link" >Help</a></li> 
        <li id="profile"><a href="#profile" class="link" >Profile</a> 

        </li> 
       </ul> 
      </div> 
       <div class="divs" > 
        <div class="divs" id="divHome">Display the home content</div> 
        <div class="divs" id="divAbout">about</div> 
        <div class="divs" id="divHelp">Help</div> 
        <div class="divs" id="divProfile">Profile</div> 
       </div> 

      <div class="footer"> 
       <h4>Copyright 2017. All CONTENT, IMAGES AND TEXT COPYRIGHTED</h4> 
      </div> 

      </div> 
     </body> 

    </html>

來源

2017-05-31 R12

'$（「div的」）訪問它'是錯誤的。它應該是'$（「div」）''或'$（「。divs」）' – j08691

正確的應該是$（「div」） –

我試過用$（「。divs」），但默認情況下， div，當我點擊關於，它清除。但我想要的是默認情況下它應該顯示家庭股利，當我點擊和其他它應該各自的股利。請幫助我。 – R12

從父div中移除類div。只有項目div應該有這個類。

 <div class="Maincontainer"> 
      <div class= "header"> 
      <h2 class="text-color">Info</h2> 
       <ul class="links"> 

        <li id="home"><a href="#home" class="link">Home</a></li> 
        <li id="about"><a href="#about" class="link" >About</a</li> 
        <li id="help"><a href="#help" class="link" >Help</a></li> 
        <li id="profile"><a href="#profile" class="link" >Profile</a> 

        </li> 
       </ul> 
      </div> 
       <div> 
        <div class="divs" id="divHome">Display the home content</div> 
        <div class="divs" id="divAbout">about</div> 
        <div class="divs" id="divHelp">Help</div> 
        <div class="divs" id="divProfile">Profile</div> 
       </div> 

      <div class="footer"> 
       <h4>Copyright 2017. All CONTENT, IMAGES AND TEXT COPYRIGHTED</h4> 
      </div> 

      </div> 
     </body>

和你的JQuery應

$(".divs").hide();

來源

2017-05-31 20:18:41

非常感謝。它正在工作，但我有一個問題。一開始，它顯示了所有的div，當我點擊home時，它顯示了家庭div的內容。但我需要的內容應該顯示默認不是所有的div。 – R12

添加樣式.divs {display：none;}以默認隱藏所有樣式。然後在你想默認顯示的div中添加一個style =「display：block」 –

真棒。這是工作。非常感謝。 – R12

jquery - 點擊鏈接不會改變div內容

回答

相關問題