Question

我是Jquery的新手。我正在尝试一个小例子。单击该链接不会更改div内容。我尝试了下面的代码，但它显示了所有div内容，当我点击每个链接时它不会改变。例如，单击“关于”应显示“divAbout”并隐藏其他等等。

我已经尝试了互联网上的所有解决方案，没有任何东西对我不起作用。请让我知道我做了什么错误。这将是非常有帮助的。

<!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>

Answer 1

从父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();

Jquery - 点击链接不会改变div内容

1 个答案: