javascript - 在悬停和单击链接时替换图像

Question

我正在尝试设置一个如下图所示的页面。

这是挂断我的部分......

当我“悬停”或“单击”下面的链接之一时，我想替换主图像。主图像下方的每个链接都有自己的特定图像。然后我想让链接图像“切换”开/关。

我曾尝试使用纯 css 来做到这一点，但真的很难。

感谢您的帮助。

Answer 1

JavaScript 解决方案

HTML:

<div id="output"></div>
<ul id="nav">
    <li data-href="http://placekitten.com/120/100">Cat 1</li>
    <li data-href="http://placekitten.com/110/100">Cat 2</li>
    <li data-href="http://placekitten.com/130/100">Cat 3</li>
    <li data-href="http://placekitten.com/150/100">Cat 4</li>
</ul>

JavaScript:

$( nav ).on( 'click', 'li', function () {
    $( this ).addClass( 'selected' ).siblings().removeClass( 'selected' );
    var url = $( this ).data( 'href' );
    $( output ).html( '<img src="' + url + '">' );
});

现场演示: http://jsfiddle.net/Kne3d/

---

替代方案(纯CSS)

HTML:

<div id="output">
    <img id="image1" src="http://placekitten.com/120/100">
    <img id="image2" src="http://placekitten.com/130/100">
    <img id="image3" src="http://placekitten.com/110/100">
    <img id="image4" src="http://placekitten.com/140/100">
</div>

<ul id="nav">
    <li><a href="#image1">Cat 1</a></li>
    <li><a href="#image2">Cat 2</a></li>
    <li><a href="#image3">Cat 3</a></li>
    <li><a href="#image4">Cat 4</a></li>
</ul>

CSS:

#output img {
    display: none;
}

#output img:target {
    display: inline;
}

现场演示: http://jsfiddle.net/Kne3d/3/

---

第三种解决方案(纯 CSS，悬停)

HTML:

<ul id="gallery">
    <li>
        <span>Cat 1</span>
        <img src="http://placekitten.com/120/100">
    </li>
    <li>
        <span>Cat 2</span>
        <img src="http://placekitten.com/150/100">
    </li>
    <li>
        <span>Cat 3</span>
        <img src="http://placekitten.com/110/100">
    </li>
    <li>
        <span>Cat 4</span>
        <img src="http://placekitten.com/140/100">
    </li>
</ul>

CSS:

#gallery img {
    display: none;
}

#gallery span:hover ~ img {
    display: block;
}

现场演示: http://jsfiddle.net/Kne3d/5/