如何启用和禁用链接？

Question

我有一种内容滑块，其工作方式如下：

$('.boxes:not(:first)').hide();
    $(".links a:first").addClass("selected"); 
    $(".links a").click(function() {
        var activeLink = $(this).attr("href"); 
        $(".links a").removeClass("selected");
        $(this).addClass("selected"); 
        $('.boxes').hide();
        $(activeLink).fadeIn();
    });

当您点击一个框时，它会显示下一个框并设置下一个框 link 也处于活动状态（这很好！）：

$('.boxes').click(function(){
    var $activeBox = $(this);
    $('.boxes').hide();
    $activeBox.next().show();
    var $activelink = $(".selected");
    $activelink.removeClass("selected");
    $activelink.next().addClass("selected");
});

我想要实现的是禁用所有 link 一次（box1、box2、box3、box4、box5），第一个除外，这样用户只需单击 box1 就可以看到下一个框。

我的问题：如何禁用除第一个以外的所有 link 并启用下一个方框 link，因为方框被单击了？

直播：http://jsfiddle.net/13mg30Lf/3/

提前致谢！

Answer 1

要用 jQuery 禁用 link :

$('#box1').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

这将阻止 hyperlink 的默认行为，即访问指定的 href。

如果要禁用特定的link，只需在此函数中添加一个条件，例如禁用具有class "disabled"

的所有元素

Answer 2

您可以尝试这样的操作：http://jsfiddle.net/13mg30Lf/5/

$(".links a:not(:first)").attr("disabled","disabled");

$('.boxes:not(:first)').hide();
    $(".links a:first").addClass("selected"); 
    $(".links a").click(function() {

        if ($(this).attr("disabled") != "disabled"){
        var activeLink = $(this).attr("href"); 
        $(".links a").removeClass("selected");
        $(this).addClass("selected"); 
        $('.boxes').hide();
        $(activeLink).fadeIn();
        }

    });

$('.boxes').click(function(){

    var $activeBox = $(this);
    $('.boxes').hide();
    $activeBox.next().show();
    var $activelink = $(".selected");
    $activelink.removeClass("selected");
    $activelink.next().addClass("selected");
    $activelink.removeAttr("disabled");       
});

Answer 3

更干净一些，IMO：http://jsfiddle.net/13mg30Lf/12/

HTML

<div class="links">
   <a href="#box1" class="disabled" data-index="1">Box1</a> >
   <a href="#box2" data-index="2">Box2</a> >
   <a href="#box3" class="disabled" data-index="3">Box3</a> >
   <a href="#box4" class="disabled" data-index="4">Box4</a> >
   <a href="#box5" class="disabled" data-index="5">Box5</a>
</div>
<div class="container">
   <div id="box1" class="boxes" data-index="1">BOX 1</div>
   <div id="box2" class="boxes hide" data-index="2">BOX 2</div>
   <div id="box3" class="boxes hide" data-index="3">BOX 3</div>
   <div id="box4" class="boxes hide" data-index="4">BOX 4</div>
   <div id="box5" class="boxes hide" data-index="5">BOX 5</div>
</div>

JS

function ShowBox(index) {
    if ($('.boxes[data-index="' + index + '"]').length) { // If a next box exists
        $('.boxes').addClass('hide'); // Hide all boxes
        $('.boxes[data-index="' + index + '"]').removeClass('hide'); // Show the next box
        $('.links a').addClass('disabled'); // Hide all links
        $('.links a[data-index="' + index + '"]').next('a').removeClass('disabled'); // Show the current link
    }
}

$('.links a, .boxes').click(function (e) {
    if (!$(this).hasClass('disabled')) { // If we don't have a disabled class
        if ($(this).hasClass('boxes')) { // If we're clicking the box
            ShowBox(parseInt($(this).attr('data-index'))+1); // Use next index            
        } else { // Else (clicking link)
            ShowBox($(this).attr('data-index')); // Use current index
        }
    }
});

如何启用和禁用链接？

How to enable and disable a link?

jquery