javascript - 一种在另一个 div 打开时隐藏一个 div 的方法

Question

我有两个 div 设置为隐藏，直到单击按钮，唯一的问题是我不希望它们同时显示。

<div id="SearchAddParams" class="hidden" style="color:orangered">
    <label for='txtSearch'>Street Number:</label>
    <input type='text' id='txtStreetNum' />
    <label for='txtSearch'>PreDir:</label>
    <input type='text' id='txtPreDir' />
    <label for='txtSearch'>PreType:</label>
    <input type='text' id='txtPreType' />
    <label for='txtSearch'>Street Name:</label>
    <input type='text' id='txtStreetName' />
    <label for='txtSearch'>Suf Dir</label>
    <input type='text' id='txtSufDir' />
    <input type='button' id='btnSearch' onclick='searchAddress()' value='Search' />
    <input type='button' id='reset' onclick='resetbutton()' value='Reset' />
</div>
<div id="SearchParParams" class="hidden" style="color:orangered">
    <label for='txtSearch'>Parcel ID:</label>
    <input type='text' id='txtParcelID' />
    <label for='txtSearch'>Owner:</label>
    <input type='text' id='txtOwner' />
    <label for='txtSearch'>Owner Addr:</label>
    <input type='text' id='txtOwnerAddr' />
    <label for='txtSearch'>Quick RefID:</label>
    <input type='text' id='txtQuickRefID' />
    <label for='txtSearch'>Section Township:</label>
    <input type='text' id='txtSectTwn' />
    <input type='button' id='btnSearch2' onclick='searchParcels()' value='Search' />
    <input type='button' id='reset2' onclick='resetbutton2()' value='Reset' />
</div>

我用来隐藏这些 div 的代码是

function unhide (divID) {
    var item = document.getElementById(divID);
    if (item) {
        item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
    }
}

有什么方法可以在单击另一个 div 时隐藏一个 div，因为我总是让两个 div 同时打开! Two divs showing at the same time

任何帮助将不胜感激

Answer 1

您可以向可切换的 div 添加一个通用类，并使用该类隐藏除选定的以外的所有内容。

html

<div id ="SearchAddParams" class="hidden group" style="color:orangered">
...
</div>

<div id="SearchParParams" class="hidden group" style="color:orangered">
...
</div>

javascript(jquery)

function unhide(divID) {
    var group= $('.group'),
        target = group.filter('#'+divId);

    if (target.length) {
        group.removeClass('unhidden').addClass('hidden');
        target.addClass('unhidden').removeClass('hidden');
    }
}