隱藏/顯示Div使用效果Jquery

我想隱藏主div和顯示另一個，用jquery，我編碼這個，但它不工作。這是jQuery和CSS。隱藏/顯示Div使用效果Jquery

  <script> 
$(".mib").click(
function Mision() { 
     var $next = $('#content #mision'); 
     var $active = $('#content .activec'); 
     $active.fadeOut(function(){ 
     $active.removeClass('activec'); 
     $next.fadeIn().addClass('activec'); 
      }); 
      }); 

    </script> 

<style> 
#content div { 
    display: none; 
    position: relative; 
    top: 0; 
    left: 0; 
} 
#content div.activec { 
    display: block; 
} 
</style>

這裏是HTML

<div id="menu"> 
<a href="" class="mib">Mision(actually here goes an image)</a> 
</div> 

<div id="content"> 
<div id="intro" class="activec">Intro Text</div> 
<div id="mision">Mision Text</div> 
</div>

我修改了代碼，我仍然無法找到的錯誤..請幫助:)

來源

2012-06-08 Josh

你能不能解釋一下，準確地說，是 '不工作'？這意味着什麼？ –

這不是，當你點擊菜單上的「mision」時，它會提供工作，但它沒有，沒有任何反應。它假設被稱爲介紹的div將會消失，而稱爲mision的div將會出現。 – Josh

試試這個：

而且ready回調中封裝你的腳本：

$(document).ready(function(){ 
    $(".mib").click(function Mision() { 
     var $next = $('#content #mision'); 
     var $active = $('#content .activec'); 
     $active.fadeOut(function(){ 
     $active.removeClass('activec'); 
     $next.fadeIn().addClass('activec'); 
     }); 
    }); 
});

DEMO

來源

2012-06-08 18:44:20 Engineer

OMG，它工作！我錯過了準備好的回調..非常感謝！我真的很感激你的回答！:) – Josh

Ew @'javascript：void'。使用'e.preventDefault（）'代替:) –

我會，謝謝。 – Josh

嘗試改變

$(".mib").click(
function Mision() {

至

$(".mib").click(
function() {

（沒關係上一次編輯，你有右括號的右邊數）。

來源

2012-06-08 18:40:07 Dan

仍然無法使用。 :( – Josh

保持簡單 - http://jsfiddle.net/4KP5F/1/

$(".mib").on("click", function(e) { 
    e.preventDefault(); 

    $("#intro").fadeOut(400, function() { 
     $("#mision").fadeIn(400); 
    }); 
});

來源

2012-06-08 18:46:12

優秀的答案。 –

它也可以工作！非常感謝！，最後的項目有點複雜，這就是爲什麼我需要使用班級卸妝，我喜歡這個社區，快速的答案。 :) – Josh

$(".mib").bind('click',function Mision() { 
     var $next = $('#content #mision'); 
     var $active = $('#content .activec'); 
     $active.fadeOut(function(){ 
     $active.removeClass('activec'); 
     $next.fadeIn().addClass('activec'); 
     }); 
    });

來源

2013-03-06 18:51:39

隱藏/顯示Div使用效果Jquery

回答

相關問題