Javascript 如何将一个链接吸引到多个元素？

我不确定标题是否指向我的问题，但： 我想用一个链接同时显示两个不同的元素（内容和图像）。。它有点像内容和图像滑块，所以如果您单击link1 attr content1和image1，如果您单击link2 attr content2和image2等等

这样我可以吸引盒子，但我怎么称呼图像呢

$(".box").hide();
$(".box:first").show();

$("a").click(function() {
    var activeLink = $(this).attr("href"); 
    $("a").removeClass("active");
    $(".box").hide();
    $(activeLink).slideDown("normal");
    return false;
});

我已经走了这么远。。

提前通知

试试看：

$(document).ready(function () {
    // Text Box
    $(".box, .img").hide();
    $(".box:first,.img:first").show();
    $("a").click(function (e) {
        var idx=$(this).index();
        e.preventDefault();
        var activeLink = $(this).attr("href");
        $("a").removeClass("active");
        $(".box, .img").hide();
        $('.container div').eq(idx).slideDown("normal");
        $('.container img').eq(idx).slideDown("normal");
    });
});

---

尝试重构图像ID引用，以遵循以链接href值命名的约定

<img id="box3-img" class="img"  src="asd.jpg" width="300" height="200" alt="img3"/>

---

我为您提供的解决方案是：

$(document).ready(function() {

    $('.links').on('click','a',function() {
        if(!$(this).hasClass('active')){
            $('.links a').removeClass('active')
            $(this).addClass('active');
            $('.container').find('.box, img').hide();
            $('.container').find('.box').eq($(this).index()).slideDown('normal');
            $('.container').find('img').eq($(this).index()).fadeIn('normal');
        }
    }); 

});

$(window).load(function(){
    $('.links').find('a:nth-child(1)').trigger('click');
});

小提琴：

---

使用此代码，您可以将无限个

、

和

，它将始终以相同的“顺序”找到

.box

和

img

，并显示它

尝试为要隐藏/显示的每个元素分配唯一的ID。听起来很有趣！但是img id=box3 img不是这里的id名称吗？我真的没有用约定重构img id？？。。

$(document).ready(function() {

    $('.links').on('click','a',function() {
        if(!$(this).hasClass('active')){
            $('.links a').removeClass('active')
            $(this).addClass('active');
            $('.container').find('.box, img').hide();
            $('.container').find('.box').eq($(this).index()).slideDown('normal');
            $('.container').find('img').eq($(this).index()).fadeIn('normal');
        }
    }); 

});

$(window).load(function(){
    $('.links').find('a:nth-child(1)').trigger('click');
});