Question

我有一个BigCommerce商店设置。现在我创建了4个标签（代表4种不同颜色的产品：金色，灰色，深灰色和黑色）。我已经设置了当单击每个选项卡时，将显示该产品的相同颜色的照片。这是代码：

  <ul class="CCW-tab">
  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">
    <img src="/template/images/CCW-Color-Gold.png" alt="Antique Brass LED Picture Light" />
    <div style="text-align:left;margin-top:18px;">Antique Brass</div>
  </a></li>

  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Paris')">
    <img src="/template/images/CCW-Color-Satin.png" alt="Satin Nickle LED Picture Light"/>
    <div style="text-align:left;margin-top:18px;">Satin Nickle</div>
  </a></li>

  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Tokyo')">
    <img src="/template/images/CCW-Color-Bronze.png" alt="Oil Rubbed Bronze LED Picture Light"/>
    <div style="text-align:left;margin-top:18px;">Oil Rubbed Bronze</div>
  </a></li>

  <li><a href="javascript:void(0)" class="tablinks" onclick="openCity(event, 'Apple')">
    <img src="/template/images/CCW-Color-Black.png" alt="Black LED Picture Light"/>
    <div style="text-align:left;margin-top:18px;">Black</div>
  </a></li>
</ul>

这些是链接到这些照片的标签

<div id="London" class="CCW-tabcontent"><img src="/template/images/CCW-BSL21AB.jpg" alt="Battery Picture Light" />                    
</div>
<div id="Paris" class="CCW-tabcontent"><img src="/template/images/CCW-BSL21AB-Silver.jpg" alt="Battery Picture Light" /> 
</div>
<div id="Tokyo" class="CCW-tabcontent"><img src="/template/images/CCW-BSL21AB-Dark-Silver.jpg" alt="Battery Picture Light" />                    
</div>
<div id="Apple" class="CCW-tabcontent"><img src="/template/images/CCW-BSL21AB-Black.jpg" alt="Battery Picture Light" /></div>

这是javascript：

    <script>
function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("CCW-tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

我正在使用分为12列的Skeleton框架。产品照片的前6列和产品颜色选项卡的后6列。现在问题在于：

我在颜色标签下方有“添加到购物车”按钮。我希望每当我们点击颜色标签时，正确的产品照片和正确的“添加到购物车”按钮同时出现。（还有4个“ADD TO CART”按钮）。

所以我在这里尝试过： photo 1

我在产品照片的<div>下添加了“添加到购物车”按钮，该按钮位于错误的一侧。

然后我尝试了这个：photo 2

现在按钮位于正确的一侧，但照片消失了。

如何使颜色标签同时适用于产品照片和“添加到购物车”按钮？或者其他任何解决方案？

如何创建一个影响2个不同元素的标签

0 个答案: