主页 / coding / 问题 / 79596931
Accepted
Gab
Asked: 2025-04-29 00:41:03 +0800 CST

在下拉菜单中选择时显示不同的选项卡

  • 772

我想根据所选项目显示不同的选项卡。以前使用按钮时可以正常工作，但当我将其更改为下拉菜单后，它就失效了。

HTML：

<option class="tab">
        <select class="tablinks" onclick="openCity(event, 'AT3')" id="defaultOpen">Transatlantic 3</select>
        <select class="tablinks" onclick="openCity(event, 'AT4')">Transatlantic 4</select>
         <select class="tablinks" onclick="openCity(event, 'AL5')">Transatlantic 5</select>
      </option>

            <div id="AT3" class="tabcontent">
                <img src="images/AT3 (via CoGH)_20250118.jpg" class="service-map">
            </div>

            <div id="AT4" class="tabcontent">
                <img src="images/AT4 (via CoGH)_20250118.jpg" class="service-map">
            </div>

            <div id="AL5" class="tabcontent">
                <img src="images/AL5 (via CoGH)_20250118.jpg" class="service-map">
            </div>

JS：

    function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("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";
}
document.getElementById("defaultOpen").click();
javascript

2 个回答

  1. Best Answer

    options 属于selects，而不是相反。

    您还可以openCity大大简化该功能：

    function openCity(cityName) {
  for (const tab of document.querySelectorAll(".tabcontent")) {
    tab.style.display = tab.id === cityName ? "" : "none";
  }
}
openCity(document.querySelector("select.tab").value);
    <select class="tab" value="AT3" onChange="openCity(event.target.value)">
  <option value="AT3">Transatlantic 3</option>
  <option value="AT4">Transatlantic 4</option>
  <option value="AT5">Transatlantic 5</option>
</select>

<div id="AT3" class="tabcontent">
  AT3
  <img src="images/AT3 (via CoGH)_20250118.jpg" class="service-map">
</div>

<div id="AT4" class="tabcontent">
  AT4
  <img src="images/AT4 (via CoGH)_20250118.jpg" class="service-map">
</div>

<div id="AT5" class="tabcontent">
  AT5
  <img src="images/AL5 (via CoGH)_20250118.jpg" class="service-map">
</div>

    • 3

  2. 无需 JavaScript 即可实现此操作。您可以使用:has()和Subsequent-sibling 组合器。

    div.tabcontent {
  display: none;
}

select:has(option[value="AT3"]:checked)~div#AT3,
select:has(option[value="AT4"]:checked)~div#AT4,
select:has(option[value="AT5"]:checked)~div#AT5 {
  display: block;
}
    <select class="tab" value="AT3">
  <option value="AT3">Transatlantic 3</option>
  <option value="AT4">Transatlantic 4</option>
  <option value="AT5">Transatlantic 5</option>
</select>

<div id="AT3" class="tabcontent">
  AT3
  <img src="images/AT3 (via CoGH)_20250118.jpg" class="service-map">
</div>

<div id="AT4" class="tabcontent">
  AT4
  <img src="images/AT4 (via CoGH)_20250118.jpg" class="service-map">
</div>

<div id="AT5" class="tabcontent">
  AT5
  <img src="images/AL5 (via CoGH)_20250118.jpg" class="service-map">
</div>

    • 2

相关问题