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

单击一个元素，显示链接的div并突出显示单击的链接：这样可以正常工作。我想要实现的是当您点击活动div时显示下一个div并突出显示活动div链接

我试图通过以下方式实现这一目标：

$('.boxes').click(function(){
    var $activeBox = $(this);
    $('.boxes').hide();
    $activeBox.next().show();
});

我跳到单击div上的下一个框（div）但是如何突出显示活动的div链接？ Exp：如果正在显示box1，则突出显示link1或box2，然后突出显示link2，依此类推..

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

提前致谢！

Answer 1

试试这个：

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

jsfiddle：http://jsfiddle.net/13mg30Lf/2/

Answer 2

更多简短且可重复使用的代码：

 $('.boxes').click(function(){
        var $activeBox = $(this);
        $(".links a[href=#"+$activeBox.next().attr('id')+"]").click();

    });

突出显示活动div链接

2 个答案: