1

所以我浏览了所有内容，包括这些帖子：

Jquery在点击时更改图像

JQuery - 如何在单击链接时更改图像 src

http://www.kirupa.com/forum/showthread.php?301972-Swap-image-on-click-Anyone

以及其他链接，我想我不明白它是如何工作的，也无法让它工作。

这是我到目前为止所拥有的：

HTML：

<div style="width:475px; height:230px; background-color:#c1bfbf;">
<div style="width:450px; height:220px; position:relative; overflow:hidden; float:left;">

    <ul style="width:450px; height:220px;  list-style:none; padding:0px; border:0px; margin:0px; position:relative; float:left;">
        <li id="first" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph2.png" /></li>
        <li id="second" style="padding:0px; border:0px; margin:0px;"><img src="images/imagegraph1.png" /></li>

    </ul>
</div>
    <div style="width:25px; height:110px; position:relative; float:left;">
        <a href="#first"><img src="images/2nd.png" /></a>
    </div>

    <div style="width:25px; height:110px; position:relative; float:left;">
        <a href="#second"><img src="images/1st.png" /></a>
    </div>
</div>

此代码使用锚标记工作，但问题是它将页面拉到我不想要的锚。所以我转向了 jQuery 和图像交换。我已经实施了其他人的代码，看看他们是否工作，我不能让他们工作。我使用了这个 jQuery 代码：

$(function () {
    $('.menulink').click(function () {
        $("#bg").attr('src', "images/imagegraph1.png");
        return false;
    });
});

与此 HTML 匹配：

<a href="#" title="Switch" class="menulink">switch me</a>
<img src="images/imagegraph2.png" id="bg" />

所发生的只是 imagegraph2.png 的显示，而不是 imagegraph1.png 的切换。通常，当您这样做然后点击“=”符号时，会为您的图像显示一个可能的链接列表。当它在 Javascript 中时，它不会这样做，您只需放置文件的文件夹/名称。所以我敢肯定我会在这里得到一些反对票，但我已经用尽所有途径来让它发挥作用。

4

1 回答 1

0

尝试e.preventDefault();

$(function () {
    $('.menulink').click(function (e) {
        e.preventDefault();
        $("#bg").attr('src', "images/imagegraph1.png");
    });
});
于 2013-07-09T17:12:49.673 回答