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

对于初学者现场已弃用，请使用.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 example

多次隐藏链接 - jquery

3 个答案: