使用效果 Jquery 隐藏/显示 Div

Question

>我正在尝试隐藏主div并显示另一个，使用jquery，我对此进行了编码，但它不起作用。这是jquery和css。

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

我修改了代码，但仍然找不到错误。.请帮忙:)

Answer 1

保持简单 - http://jsfiddle.net/4KP5F/1/

$(".mib").on("click", function(e) {
    e.preventDefault();
    $("#intro").fadeOut(400, function() {
        $("#mision").fadeIn(400);
    });
});

Answer 2

试试这个：

<a href="javascript:void(0)" class="mib">Mision(actually here goes an image)</a>

并将脚本封装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');
      });   
   });
});

演示

Answer 3

尝试更改

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

自

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

（没关系，在最后一次编辑时，您有正确数量的右括号。

Answer 4

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