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

Answer 2

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

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

<强> Working Demo

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>

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

3 个答案: