Question

我今天大部分时间一直在研究，但发现并不多，所以我想知道你们是否可以提供帮助。

我有两个链接，我想控制两个div。我希望它能够在单击链接时显示相应的div并激活该链接上的“link-active”类。当点击另一个链接时，我希望旧的div淡出，并且新的链接与淡入淡出并重新应用'link-active'类。

HTML：

<a href="#walking" id="walking" class="link-active"><p>Dog Walking</p></a>
<a href="#grooming" id="grooming"><p>Dog Grooming</p></a>

<div class="walk"></div>
<div class="groom"></div>

我理解这可能不是最好的描述所以这里是帮助我的小提琴。

小提琴：http://jsfiddle.net/swift29/LUkk4/1/

提前干杯

Answer 1

在您的文档就绪事件中，添加以下代码以实现所描述的行为

$('#walking').click(function()
{
   $('.groom').fadeOut(100, function() 
   {
        $('.groom').removeClass('link-active');
        $('.walk').fadeIn(100, function()
        {   
            $('.walk').addClass('link-active');
        });
   });
   //prevent default click event
   return false;
});

将相同的事件添加到另一个div，只需替换.walk和.groom类名。

Answer 2

此解决方案使用一个简单的函数来处理fadeIn / fadeOut。它试图尽可能地消除代码重复。

<强>的Javascript

$("#walking").click(function(){
    swap(this, "walk", "groom");
});

$("#grooming").click(function(){
  swap(this, "groom", "walk");
});

function swap(obj, active, inactive){
  $("." + inactive).fadeOut(500, function(){
      $("." + active).fadeIn().addClass("link-active");
  });
  $("#walking, #grooming").removeClass("link-active");
  $(obj).addClass("link-active");
}

工作示例：http://jsfiddle.net/LUkk4/6/

隐藏div并显示另一个并更改链接类Jquery

2 个答案: