javascript - 多次隐藏链接 - jquery

Question

我有两个链接。一个显示，另一个隐藏。单击第一个链接后，它应该会消失，而第二个应该会显示。在我点击第二个之后，第一个应该出现在她的位置之前。

这是我的代码：

HTML

<a class="link-one" href="javascript:void(0)" rel="do-2">Link one</a>
<a class="link-two" href="javascript:void(0)" rel="do-3">Link two</a>

jQuery

$(".link-one").live('click',function(){
    //some actions
    $(this).hide();
    $(".link-two").show().on('click',function(){
        //some actions
        $(this).hide();
        $("link-one").show();
    });
});

CSS

.link-two{ display: none;}

有人可以给我一个提示我做错了什么吗？

Answer 1

一个更好的解决方案，给两个链接一个公共类，然后只使用一个函数（让我们使用类alterLink）

$(".alterLink").click(function() {
    /*
    $(this).hide();
    $(".alterLink").not(this).show();
    */

    //Per comments, this is easier (assuming only 2 links)
    $(".alterLink").toggle();
});

演示：http: //jsfiddle.net/zDQde/

Answer 2

对于初学者 live 已弃用，请改用 .on ，您的第一个选择器缺少 .

所以事不宜迟：

$(".link-one, .link-two").on('click',function(){
    $(".link-one, .link-two").toggleClass('hidden');
});

.hidden
{
display:none;
}

并从隐藏在您的链接二上的课程开始。

Answer 3

$('.link-one,.link-two').click(function () {
    $('.link-one,.link-two').toggle()
});

jsFiddle 示例