Question

刷新页面后会显示第二个<div>，我想避免这种情况。

＆＃13;

$(function(){
    $("#div2").hide();
    $("button").click(function(){
        $("#div1").hide()
        $("#div2").fadeIn(1000)
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
    <button id="button">Click</button>
    
  </div>
    
    
  <div id="div2">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

＆＃13;

Answer 1

而不是通过div2函数隐藏hide()而不是使用css。

#div2 { display:none; }

并更改代码

中缺少;的脚本代码

 <script>
$(function(){

    $("button").click(function(){
        $("#div1").hide();
        $("#div2").fadeIn(1000);
    });

});
</script>

Answer 2

 <!doctype html>
 <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
       <script>
       $(function()
       {
         $("#div2").hide();
         $("button").click(function(){
         $("#div1").hide()
         $("#div2").fadeIn(1000)
        });

        });
        </script>
 </head>

 <div id="div1">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
    <button id="button">Click</button>
 </div>

 <div id="div2">
   Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
 </div>
 </html>

Answer 3

你只需要jquery来运行你的代码

＆＃13;

$(document).ready(function() {
    $("#div2").hide();
    $("#button").click(function(){
        $("#div1").hide();
        $("#div2").fadeIn(1000);
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div1">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
   
    
  </div>
     <button id="button">Click</button>
    
  <div id="div2">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus sequi omnis veritatis dicta laborum iste provident, ex ratione, neque veniam quis. Hic repellat nulla in minus! Sit quia dicta modi.
</div>

＆＃13;

Jquery 2 div之间不兼容[hide-show]

3 个答案: