Question

我有一个关于制作按钮显示图像的问题例如，我有四个按钮我希望每个按钮在图像的相同内容中显示图像

换句话说：按其中一个按钮显示图像

这是一个例子：http://jsfiddle.net/i5yal/yvCtQ/1/

<div id="section-container">
<div class="section-img-container"><a>images will appear here</a>
</div>
</div>

<div id="section-button-container"><div>
<div class="section-button1"><a>1</a>
</div>

<div class="section-button2"><a>2</a>
</div>

<div class="section-button3"><a>3</a>
</div>

<div class="section-button4"><a>4</a>
</div>

</div>
</div>

css代码：

    #section-container {
background-color: #C0C0C0;
width: 300px;
height: 300px;
margin:0 auto;
}

#section-button-container {
width: 300px;
height: 30px;
margin:0 auto;
}

.section-button1 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 30px;
margin-right: 20px;
}

.section-button2 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-button3 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-button4 {
background-color: #808000;
width: 30px;
height: 30px;
float: left;
display: block;
margin-left: 20px;
margin-right: 20px;
}

.section-img-container {
background-color: #008080;
background-position: center center;
width: 270px;
height: 270px;
margin: 0 auto;
}

Answer 1

为避免使用JavaScript，可以使用CSS（尽管必须对HTML进行一些小的调整才能这样做）;所以给出修改后的HTML：

<div id="section-container">
    <div class="section-img-container">
        <input type="radio" name="images" id="img1" />
        <img src="http://placekitten.com/300/300/" />
        <input type="radio" name="images" id="img2" />
        <img src="http://lorempixel.com/300/300/nightlife" />
        <input type="radio" name="images" id="img3" />
        <img src="http://lorempixel.com/300/300/people" />
        <input type="radio" name="images" id="img4" />
        <img src="http://dummyimage.com/300x300/000/f90.png&text=image+lorem+ipsum" />
    </div>
</div>

<div id="section-button-container"><div>
    <div class="section-button1">
        <label for="img1">1</label>
    </div>

    <div class="section-button2">
        <label for="img2">2</label>
    </div>

    <div class="section-button3">
        <label for="img3">3</label>
    </div>

    <div class="section-button4">
        <label for="img4">4</label>
    </div>

    </div>
</div>

以下CSS：

#section-button-container label {
    display: block;
    text-align: center;
    height: 100%;
    line-height: 30px;
    cursor: pointer;
}
input[type=radio],
input[type=radio] + img {
    display: none;
}

input:checked + img {
    display: block;
}

JS Fiddle demo

这确实需要浏览器支持:checked伪选择器和CSS next-sibling +组合器;并利用label能够检查/取消选中无线电输入（只要for的{{1}}属性标识相关label id }}）。

参考文献：

Answer 2

对于动画部分调查此库，自己使用它并且它很好地工作=＆gt; animate.css

对于图像的更改而言，这是一种相当简单的方法。

$(document).ready(function() {
    var viewer = $('img.viewer');
    $('a.section-button').click(function () {
        viewer.attr('src', 'your new path to new image');
    });
});

在上面我添加了将附加到主视图区域的类，所以你有：

  <img class="veiwer" />.

您只需隐藏此页面或在页面加载时加载默认图像。

在每个锚点上也使用“section-button”类。我没有在选项列表中考虑定位，这意味着1,2,3,4号图片等等。在部分按钮上拥有数据属性可能是最简单的。就像这样。

<a class="section-button" data-imgrc="path to the large image" data-number="1">1</a>

请注意，如果您只是在部分按钮内部有数字，那么只需抓住内部文本，但我个人更喜欢数据属性。

css ..我怎样才能制作按钮显示图像

2 个答案: