Question

我正在为某个项目做一个网站，我有这个设置

<div id="navcontainer">
    <img src="Images/image1.png" width="138" height="20" />
    <img src="Images/image2.png" width="138" height="20" />
    <img src="Images/image3.png" width="138" height="20" />
</div>

<div id="leftimage">
    <img src="Images/leftfooter1.png" width="138" height="20" />
</div>

<div id="rightimage">
    <img src="Images/rightfooter1.png" width="138" height="20" />
</div>

我希望在按下图像1时换到另一个图像（表示当前选择的字段）并且两个div（leftimage和rightimage）中的图像都要改变。单击image2同样的事情，但将其他链接图像重置为默认状态。还需要一个默认加载，因此如果用户没有按下任何按钮，它就不会为空。

编辑：这是我基本需要的图像，https://drive.google.com/file/d/0B6X8uGoS_xDwMlo4V3d5VzluUHc/edit?usp=sharing 因为我对JS很愚蠢，并且无法根据给出的答案找出一个东西= /

从图像中可以看到，有3个图像（不是文本链接），其下降状态表示所选的一个。根据选择，左侧div加载图像，右侧div显示文本。（默认情况下，第一个应该开启）

我希望这会让事情彻底清除，并且非常抱歉成为一个全新手，但就像我说我从未做过JS并且完成这件事对我来说意味着很多：）

Answer 1

您可以将onclick事件附加到每个主图像，并使用表示单击了哪个图像的参数调用函数：

<div id="navcontainer">
    <img src="Images/image1.png" width="138" height="20" onclick="myfunction(1);" />
    <img src="Images/image2.png" width="138" height="20" onclick="myfunction(2);" />
    <img src="Images/image3.png" width="138" height="20" onclick="myfunction(3);" />
</div>

然后您可以编写一个js文件/函数来处理每个可能的点击：

var myfunction = function(pictureClicked) {
    // Put logic here, maybe a switch statement?
    switch (pictureClicked) {
        case 1:
            // Pic 1 clicked!
            break;
        case 2:
            //continue from here. 
    }
}

在此函数中，您可以使用getElementById访问两个divs leftimage / rightimage。将dom元素存储在变量中后，可以使用正确的图像链接更新innerHTML。更好的是，您可以将id分配给两个图像标记，并直接更改src属性：请参阅here。

Answer 2

我不知道我是否理解你，但这是你想要的吗？

Demo.

JS：

$("#navcontainer img").click(function () {
    if ($(this).attr("src") == "//dummyimage.com/100") {
        $(this).attr("src", "//dummyimage.com/100/eee");
        $("#navcontainer img").not($(this)).attr("src", "//dummyimage.com/100");
    } else {
        $(this).attr("src", "//dummyimage.com/100");
        $("#navcontainer img").not($(this)).attr("src", "//dummyimage.com/100/eee");
    }
    $("#leftimage img, #rightimage img").attr("src") == "//dummyimage.com/100" ? $("#leftimage img, #rightimage img").attr("src", "//dummyimage.com/100/000/fff") : $("#leftimage img, #rightimage img").attr("src", "//dummyimage.com/100");
});

编辑：我更新了我的小提琴。

Answer 3

好的，但是我确信有人可以缩短它。另一件事是我假设你只有这三个链接。如果链接是动态生成的，那么您需要一个不同的解决方案。

$(function() {
$('#navcontainer').children().click(function(){
    resetImage();
    $(this).attr('src', 'replacement.jpg');
    $('#leftimage > img').attr('src', 'replacement_left.jpg');
    $('#rightimage > img').attr('src', 'replacement_right.jpg');
});
var resetImage = function(){
    $('#leftimage > img').attr('src', 'http://i58.tinypic.com/5yuwjk.jpg');
    $('#rightimage > img').attr('src', 'http://i58.tinypic.com/5yuwjk.jpg');
    $('.image_one').attr('src', 'http://i57.tinypic.com/5yuw4m.jpg');
    $('.image_two').attr('src', 'http://i57.tinypic.com/5yuw4m.jpg');
    $('.image_three').attr('src', 'http://i57.tinypic.com/5yuw4m.jpg');
};

}）;

http://jsfiddle.net/Arllo/wLAfc/

3个链接，2个div内容，更改链接点击内容

3 个答案: