當另一個div打開時隱藏div的方法

我有兩個divs被設置爲隱藏狀態，直到單擊該按鈕，唯一的問題是我不希望他們兩個同時顯示。當另一個div打開時隱藏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的！ Two divs showing at the same time

任何幫助，將不勝感激

來源

2014-11-04 Logan Jones

你可以一個共同的類添加到是可切換的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'); 
    } 
}

來源

2014-11-04 17:54:42

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

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

Working Demo

來源

2014-11-04 17:51:10

這個工作會取代我的其他功能嗎？ – 2014-11-04 17:53:28

是的。因爲show hide它會。只要確保你使用css'display：none'來隱藏單個元素。 – 2014-11-04 17:58:46

這兩個答案工作非常感謝 – 2014-11-04 18:03:13

這裏是你用純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"; 
 
\t \t 
 
    } else { 
 
     SearchAddParams.style.display = "none"; 
 
    } 
 
\t if(SearchParParams.style.display == null || SearchParParams.style.display == "none") { 
 
     SearchParParams.style.display = "block"; 
 
\t \t 
 
    } else { 
 
     SearchParParams.style.display = "none"; 
 
    } 
 
}

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

來源

2014-11-04 18:08:42 vrajesh

回答

相關問題