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>

Answer 1

如评论中所述：

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

Answer 2

试试这个：

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

Answer 3

你应该做

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

即使你把脚本放在正文之前，它肯定会在DOM准备就绪之后运行。

Answer 4

你的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>

Chek这个工作的例子 Jsfiddle

JQuery .click .hide div里面有div

4 个答案: