当另一个div打开时隐藏div的方法

Question

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

<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！ 同时显示两个divs

任何帮助将不胜感激

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');
    }
}

Answer 2

您可以使用.toggle()方法：

$('#SearchParParams, #SearchAddParams').toggle();

工作演示

Answer 3

这是您使用纯javascript的解决方案：

 function togglediv() { var SearchAddParams = document.getElementById('SearchAddParams'); var SearchParParams = document.getElementById('SearchParParams'); // SearchAddParams.style.display = "none" ? "block" : "none"; if(SearchAddParams.style.display == null || SearchAddParams.style.display == "none") { SearchAddParams.style.display = "block"; } else { SearchAddParams.style.display = "none"; } if(SearchParParams.style.display == null || SearchParParams.style.display == "none") { SearchParParams.style.display = "block"; } else { SearchParParams.style.display = "none"; } } 

 <button onclick="togglediv()" >click</button> <div id="SearchAddParams">SearchAddParams</div> <div id="SearchParParams">SearchParParams</div>