Question

我不确定标题是否指向我的问题但是：我想用一个链接同时显示两个不同的元素（内容和图像）..它有点内容和图像滑块，所以如果你点击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;
});

我到目前为止...... http://jsfiddle.net/2GR3W/2/

Thnx提前！

Answer 1

尝试：

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

<强> jsFiddle example

Answer 2

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

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

然后你可以将'href'attr值视为仅针对图像ID的前缀：

$(activeLink + "-img").show();

http://jsfiddle.net/2GR3W/5/

Answer 3

我的解决方案是：

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

小提琴：

http://jsfiddle.net/2GR3W/7/

使用此代码，您可以设置无限<a/>，<div class="box"/>和<img/>，它始终会找到.box和img相同的＆＃ 39;为了＆＃39;并显示它

如何链接到多个元素？

3 个答案: