1

我今天大部分时间都在研究，但没有找到太多，所以我想知道你们是否可以提供帮助。

我有两个链接，我想用它们来控制两个 div。我想要它，以便在单击链接时显示相应的 div 并激活该链接上的“链接活动”类。单击另一个链接时，我希望旧 div 淡出，而与新链接相关的新 div 淡入并重新应用“链接活动”类。

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/

提前喝彩

4

2 回答 2

0

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

$('#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 类名。

于 2013-01-06T16:06:20.543 回答
0

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

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/

于 2013-01-06T16:09:00.013 回答