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内容

回答

相关问题