0

ボタンに画像を表示させることについて質問がありますたとえば、4 つのボタンが必要です画像の同じコンテンツ内の画像を表示する各ボタン

つまり、ボタンの 1 つを押すと、画像が表示されます。

ここに例があります: https://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;
}
4

2 に答える 2

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 フィドルのデモ。

:checkedただし、これにはブラウザが疑似セレクタと CSS の次の兄弟+コンビネータをサポートしている必要があります。また、無線入力をチェック/チェック解除できることを利用します ( の属性が関連する を識別するlabel限り)。forlabelidinput

参考文献:

于 2013-05-19T18:18:52.787 に答える