Question

我有一个选择列表，这些列表根据选择更改内容。除Chrome以外，它在MS Edge，IE和FireFox上均可正常运行。也许我缺少一些东西，下面是我的所有代码：

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";
}

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab option {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab option:hover {
  background-color: #ddd;
}

.tab option.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<body>
  <select class="tab">
    <option value="london" class="tablinks" onclick="openCity(event, 'London')">London</option>
    <option value="paris" class="tablinks" onclick="openCity(event, 'Paris')">Paris</option>
  </select>

  <div id="London" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
  </div>

  <div id="Paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
  </div>
</body>

Answer 1

您不应将click个事件直接附加到<option>个事件上。获得所选选项的方法是侦听change上的<select>事件。

更改后，this函数中的openCity指向<select>。我得到这样的选定文本：

  this.options[this.selectedIndex].text // Paris, London, etc.

这些值与您的id .tabcontent的{{1}}相匹配。然后我们显示内容。

<div>s

  document.getElementById(
    this.options[this.selectedIndex].text
  ).style.display = "block";

document.querySelector('.tab').addEventListener('change', openCity);

function openCity(evt) {
  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(
    this.options[this.selectedIndex].text
  ).style.display = "block";

  evt.currentTarget.className += " active";
}

body {
  font-family: Arial;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab option {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab option:hover {
  background-color: #ddd;
}

.tab option.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

jsFiddle

Answer 2

您不应在选项Elements中使用onClick事件。请改用select的onChange事件。尝试使用事件获取选定的值。试试这个代码。在chrome中也可以正常工作。

<body>
<select class="tab" onchange="openCity(event)">
    <option value="london" class="tablinks">London</option>
    <option value="paris" class="tablinks">Paris</option>
</select>

<div id="london" class="tabcontent">
    <h3>London</h3>
    <p>London is the capital city of England.</p>
</div>

<div id="paris" class="tabcontent">
    <h3>Paris</h3>
    <p>Paris is the capital of France.</p>
</div>
</body>

function openCity(evt) {
        var cityName = evt.target.value;
        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";
   }

选择选项下拉菜单不适用于Chrome

2 个答案: