1

JSFIDDLE

大家好！我猜这可能会使我们成为一个非常愚蠢的问题，但我已经阻止了......有一个指向 JS fiddle 的链接，其中包含一个非常简单的仅 CSS 图像滑块。What I want to achieve is when a certain image is selected, I want the coresponding box underneath to remain orange. 任何提示都将受到高度评价:)

这是我的代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
    body
    {
        text-align: center;
    }

    #images
    {
        width: 300px;
        height: 300px;
        overflow: hidden;
        position: relative;
        margin: 20px auto;
        background-color:#ffffff;
    }

        #images img
        {
            background-color:#ffffff;
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            left: -400px;
            z-index: 1;
            opacity: 0;
            transition: all linear 500ms;
            -o-transition: all linear 500ms;
            -moz-transition: all linear 500ms;
            -webkit-transition: all linear 500ms;
        }

            #images img:target
            {
                left: 0;
                z-index: 9;
                opacity: 1;
            }

            #images img:first-child
            {
                left: 0;
                opacity: 1;
            }
    #slider
    {
        width:300px;
        margin-left:auto;
        margin-right:auto;
    }
    #slider a
    {
        font-family: 'Segoe UI', 'Century Gothic', sans-serif;
        text-decoration: none;
        background: #808080;
        padding: 1% 7% 1% 7%; 
        color: #808080;
        display:inline-block;
        margin-bottom:10px;
    }

        #slider a:hover
        {
            background: #ff6a00;
            color: #ff6a00;
        }
    #shadowbox
    {
     border-radius: 10px;
     -o-border-radius:10px;
     -webkit-border-radius:10px;
     -moz-border-radius:10px;
     padding-top:5px;
     padding-bottom:5px;
     width: 400px;
     height: auto;
     box-shadow: #808080 0 0 7px;
     margin-left:auto;
     margin-right:auto;
    }
</style>
</head>
<body>
<div id="shadowbox">
<div id="images">
    <img id="image1" src="A-06.png" />
    <img id="image2" src="A-07.png" />
    <img id="image3" src="A-05.png" />
    <img id="image4" src="Images_Test-01.png" />
</div>
<div id="slider">
    <a href="#image1">.</a>
    <a href="#image2">.</a>
    <a href="#image3">.</a>
    <a href="#image4">.</a>
</div></div>
</body>
</html>
4

2 回答 2

2

当然，使用 JS 会更容易。我能想到的唯一方法是单独使用 CSS 将图像放在<a>s 内，以便按钮可以共享:target状态。因此，涉及到一些重新编码。:-)

于 2013-06-06T09:24:54.180 回答
2

我添加了一个可以帮助你的 JQUERY 代码

$(document).ready(function(){
    $("a").click(function(){
    $("a").css("background-color","#808080");
        $(this).css("background-color","#ff6a00");
  });
});

看演示

于 2013-06-06T10:16:17.957 回答