Question

在页面加载时，所有内容都可见。希望仅显示特定下拉列表值，但现在页面加载时会显示三个选项卡。

<select onchange="openCity(event, this.value)">
<option>Select search option</option>
<option>To Rent</option>
<option>To Sale</option>
</select>
<div id="Select search option" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

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

<div id="To Sale" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

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

Answer 1

这是因为您的脚本隐藏了openCity()函数中的所有选项卡，这些选项卡在首次加载页面时未调用，仅在<select>更改时才会被调用。

您需要将隐藏在openCity()功能之外的标签的代码移动到您可以多次调用的自己的功能中。

// pre-cache these values outside your function
var tabcontent = document.getElementsByClassName("tabcontent");
var tablinks = document.getElementsByClassName("tablinks");

// reusable hide function you can call multiple times
function hideAllTabs() {
    for (var i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
}
hideAllTabs();

function openCity(evt, cityName) {
    hideAllTabs();

    for (var i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}

然而，更简单的方法是简单地使用CSS来隐藏所有选项卡。然后，您的active课程可以被告知将display CSS属性更改为block，以便仅在活动时显示自己。

<style>
    /* hide all tabs by default */
    .tabcontent {
        display: none;
    }

    /* only show the active tab */
    .active {
        display: block;
    }
</style>

然后，您可以完全删除该hideAllTabs()函数，因为您使用的是纯CSS来隐藏和显示标签。

Answer 2

您可以在文档加载时在选择列表上触发更改事件。

var e = document.getElementsByTagName("select")[0];
var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
e.dispatchEvent(evt);
    OR
// Create a new 'change' event
var event = new Event('change');
e.dispatchEvent(event);

下拉内容更改问题

2 个答案: