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();
    });

当你点击一个方框时，它显示下一个方框并设置下一个方框链接也是活跃的（这很好！）：

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

我想要实现的是禁用所有链接一次（box1，box2，box3，box4，box5），除了第一个，这样用户只能点击box1看到下一个框。

我的问题：如何禁用除第一个链接之外的所有链接，并启用单击框上的下一个框链接？

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

提前感谢！

Answer 1

你可以尝试这样的事情：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 2

禁用jQuery的链接：

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

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

如果要禁用特定链接，只需在此函数中添加条件，例如禁用“禁用”类的所有元素

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
        }
    }
});

如何启用和禁用链接？

3 个答案: