單擊以隱藏每個div並在jquery中顯示另一個div

Question

我是jQuery新手。 嘗試隱藏第一個div並顯示第二個div。 當我再次單擊第2個div時，它將顯示第一個div。

這是我的代碼。

 $(".c1").on('click', function() { $(".one").fadeIn(); $(".two").fadeOut(); }); $(".c2").on('click', function() { $(".two").fadeIn(); $(".one").fadeOut(); }); 

 .right { font-size: 20px; float: right; margin-right: 50px; } .ab-container { margin-bottom: 50px; } .container { padding: 30px 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <a href="" class="right c1"> Click to see div 2</a></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two"> <div class="ab-head "> <h1>This is div 2 <a href="" class="right c2"> Click to see div 1</a></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div> 

Answer 1

• 您可以將fadeOut和fadeIn調用反轉。
• 你需要prevent的a鏈接行為。
• 將您的fadeIn呼叫作為回調傳遞。

查看這些代碼片段以及這些修復程序

我添加了一個hide類，以顯示DIV如何出現和消失。

 $(".c1").on('click', function(e) { e.preventDefault(); $(".one").fadeOut(function() { $(".two").fadeIn(); }); }); $(".c2").on('click', function(e) { e.preventDefault(); $(".two").fadeOut(function() { $(".one").fadeIn(); }); }); 

 .right { font-size: 20px; float: right; margin-right: 50px; } .ab-container { margin-bottom: 50px; } .container { padding: 30px 60px; } .hide { display: none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <a href="" class="right c1"> Click to see div 2</a></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two hide"> <div class="ab-head "> <h1>This is div 2 <a href="" class="right c2"> Click to see div 1</a></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div> 

看到？ 現在正在按您的邏輯工作！

Answer 2

首先，如果使用跨距而不是鏈接，它將更好地工作

nyou對淡入/淡出的順序感到困惑：

 $(".c1").on('click', function() { $(".two").fadeIn(); $(".one").fadeOut(); }); $(".c2").on('click', function() { $(".one").fadeIn(); $(".two").fadeOut(); }); 

 .right { font-size: 20px; float: right; margin-right: 50px; } .ab-container { margin-bottom: 50px; } .container { padding: 30px 60px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <span class="right c1"> Click to see div 2</span></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two"> <div class="ab-head "> <h1>This is div 2 <span class="right c2"> Click to see div 1</span></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div> 

Answer 3

您的代碼可以正常工作，您只需要從<a>標記中刪除href="" 。 但是，如果您想看看，這是我的處理方法。 以及HTML的編輯版本

 $('.c1').click(function () { $('.one').fadeIn(); $('.two').fadeOut(); }) $('.c2').click(function () { $('.two').fadeIn(); $('.one').fadeOut(); }) 

 <div class="container"> <div class="ab-container one"> <div class="ab-head"> <h1>This is div 1 <a class="right c1"> Click to see div 2</a></h1> </div> <div class="ab-content"> <p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p> </div> </div> <div class="ab-container two"> <div class="ab-head "> <h1>This is div 2 <a class="right c2"> Click to see div 1</a></h1> </div> <div class="ab-content"> <p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p> </div> </div> </div>