web-dev-qa-db-ja.com

単純なdiv onclick show javascript

リンクをクリックすると、対応するdivが表示されますが、次のリンクをクリックすると、以前にクリックしたダイビングだけでなく、新しくクリックしたダイビングも表示されます。以前のdivを非表示にしてください。開発の初心者の方、助けてください........

これはリンクのhtmlコードです。

<a class="hide" onclick="showdiv('firstimpression'); " href="#">First Impression</a>
<a class="hide" onclick="showdiv('speaking'); " href="#">Speaking</a>
<a class="hide" onclick="showdiv('eating'); " href="#">Eating</a>
<a class="hide" onclick="showdiv('taste'); " href="#">Taste</a>
<a class="hide" onclick="showdiv('saliva'); " href="#">Saliva</a>
<a class="hide" onclick="showdiv('cleaning');" href="#">Cleaning</a>
<a class="hide" onclick="showdiv('nighttime');" href="#">Night Time</a>
<a class="hide" onclick="showdiv('singledenture');" href="#">Single Denture</a>
<a class="hide" onclick="showdiv('soreness');"  href="#">Soreness</a>
<a class="hide" onclick="showdiv('burning');" href="#">Burning</a>
<a class="hide" onclick="showdiv('adapting');" href="#">Adapting</a>
<a class="hide" onclick="showdiv('futureconsideration');" href="#">Future Consideration</a>
<a class="hide" onclick="showdiv('conclusion');" href="#">Conclusion</a>

これらはdivです：

<div id="firstimpression" class="patientinfodivs">
<div id="speaking" class="patientinfodivs">

.....等々

JavaScriptコード

<script type="text/javascript">
function showdiv(id){
document.getElementById(id).style.display = "block";
}
</script>
javascripthtmlhideshow
7
user813032

私がグローバル変数を作成するのが嫌いな限り、それらは時々とても便利になります...

var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}

これにより、divを不必要に検索して、非表示にするdivを見つけることができなくなります。

編集：@StevenRooseの提案を拡張：

var _targetdiv = null;
function showdiv(id) {
    if(_targetdiv)
        _targetdiv.style.display = 'none';
    _targetdiv = document.getElementById(id);
    _targetdiv.style.display = 'block';
}
12
Nick

これは、グローバル（関数自体以外）を使用しないバージョンです。変数は関数オブジェクトに保持されます。

function showdiv( id ) { 
    if( showdiv.div ) { 
        showdiv.div.style.display = 'none';
    }
    showdiv.div = document.getElementById(id);
    showdiv.div.style.display = 'block';
}
1
Matthew Wilcoxson

まずshowdiv（）ですべての要素をdisplay = "none"にする必要があります。そして、選択した要素をdisplay = "block";にします。

また、すべてのdivを非表示にする2つの関数hidealldivs（）と、選択を表示する現在のshowdiv（）で構成することもできます。

次に、onClickはそれらの両方を次々に呼び出します

onclick="hidealldivs(); showdiv('eating')"
0
DaneSoul

最初にdivを非表示にする必要があります。 StyleSheetまたはインラインのいずれか。

.patientinfodivs {
    display: none;
}

<div id="firstimpression" class="patientinfodivs" style="display: none;">
0
iambriansreed