jquery - JQuery .click .hide div 里面有 div

Question

当用户点击#homepage-alpha时，我试图让脚本隐藏#homepage和其中的3个div

#alpha { display:none; }

$("#homepage-alpha").click(function(){ 
   $("#homepage").hide(); 
   $("#alpha").show(); 
});

<div id="homepage">
   <div id="homepage-alpha"></div>
   <div id="homepage-bravo"></div>
   <div id="homepage-charlie"></div>
</div>

<div id="alpha">
</div>

score 0 · Accepted Answer

如评论中所述：

    #alpha { display:none; }

    <div id="homepage">
       <div id="homepage-alpha"></div>
       <div id="homepage-bravo"></div>
       <div id="homepage-charlie"></div>
    </div>

    <div id="alpha">
    </div>

    <script>       
    $("#homepage-alpha").click(function(){ 
       $("#homepage").hide(); 
       $("#alpha").show(); 
    });
    </script>

score 0 · Accepted Answer

试试这个：

 <html>
 <head>
 <style>
  #alpha { display:none; }
 </style>
 </head>
    <body>
    <div id="homepage">
       <div id="homepage-alpha"></div>
       <div id="homepage-bravo"></div>
       <div id="homepage-charlie"></div>
    </div>

    <div id="alpha">
    </div>

    <script>       
    $("#homepage-alpha").click(function(){ 
       $("#homepage").hide(); 
       $("#alpha").show(); 
    });
    </script>
  </body>
  </html>

score 0 · Accepted Answer

你应该做

    ...
    <script>       
      $(document).ready(function(){
       $("#homepage-alpha").on('click',function(){ 
       $("#homepage").hide(); 
       $("#alpha").show(); 
      });
   });
   </script>

即使您将脚本放在正文之前，它也肯定会在 DOM 准备好之后运行。

score 0 · Accepted Answer

你的 html 和 js 代码很好，只要用对了。

<div id="homepage">
   <div id="homepage-alpha"></div>
   <div id="homepage-bravo"></div>
   <div id="homepage-charlie"></div>
</div>

<div id="alpha">

<script> 
$(function() {
  $("#homepage-alpha").click(function(){ 
     $("#homepage").hide(); 
     $( "#alpha" ).show(); 
  });
});
</script>

检查这个工作示例 Jsfiddle

jquery - JQuery .click .hide div 里面有 div

4 回答 4

Related

Reference