在少数几个上制作图像按钮答案

【问题标题】：Making image buttons on select few在少数几个上制作图像按钮
【发布时间】：2016-04-23 02:35:26
【问题描述】：

所以我正在做一个网站，观众可以进入其中查看待售的连衣裙。当他们第一次加载页面时，一个图像被放入 div "Dress" 中，这就是连衣裙的正面。下面是四个纽扣，每个纽扣都有一个类别，纽扣的背景图像是裙子的另一面。我正在使用数据库来存储所有图像路径以获取每件衣服的不同图像。但是现在，当您单击下拉菜单时，它想将其用作“图像按钮”。这是我的代码..我不知道如何解释它，但我不希望它认为下拉是图像的另一个 href 标记，但现在它是一个实际链接。

<a href="<?php echo $Front;?>"><button class="Front"></button></a>
<a href="<?php echo $Back;?>"><button class="Back"></button></a>
<a href="<?php echo $Side;?>"><button class="Side"></button></a>
<a href="<?php echo $Other;?>"><button class="Other"></button></a>

<div id="Dress"><img src="" alt=""/></div>

<script>
var a = document.getElementsByTagName("a"),
popup = document.getElementById("Dress"),
img = document.getElementsByTagName("img")[0];

for(i = 0; i < a.length; i++)
{
   a[i].onclick = function(){
    popup.style.display="block";
    img.src = this.href;
    img.alt = this.innerHTML;
    return false;
}
}

我也有一些下拉代码。

<li><a href="Prom.php">Prom</a></li>
<li><a href="#">Ballgown</a></li>
<li><a href="#">Special Occassion</a></li>

当单击这些按钮转到另一个页面时，在“Dress”div 中会显示链接的名称。像舞会、舞会礼服或特殊场合。有没有办法可以编辑我的脚本，所以它只检查前四个 a href 的？

【问题讨论】：

标签： javascript html css button hyperlink

【解决方案1】：

这一行：

var a = document.getElementsByTagName("a")

正在获取页面上的所有 a 元素，包括下拉列表中的元素。你想做这样的事情：

HTML：

<div id="DressButtons">
    <a href="<?php echo $Front;?>"><button class="Front"></button></a>
    <a href="<?php echo $Back;?>"><button class="Back"></button></a>
    <a href="<?php echo $Side;?>"><button class="Side"></button></a>
    <a href="<?php echo $Other;?>"><button class="Other"></button></a>
</div>

JavaScript：

var buttons = document.getElementById("DressButtons"),
    a = buttons.getElementsByTagName("a")

【讨论】：