7

リンクをクリックすると、対応するdivが表示されますが、次のリンクをクリックすると、以前にクリックしたものと同様に、新しくクリックしたダイビングが表示されます。previosdivを非表示にします。開発に不慣れな人が私を助けてください........

これはリンクの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>
4

4 に答える 4

12

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

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';
}
于 2012-05-06T07:00:11.377 に答える
1

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

function showdiv( id ) { 
    if( showdiv.div ) { 
        showdiv.div.style.display = 'none';
    }
    showdiv.div = document.getElementById(id);
    showdiv.div.style.display = 'block';
}
于 2017-01-25T14:18:12.507 に答える
0

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

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

次に、onClickは両方を次々に呼び出します

onclick="hidealldivs(); showdiv('eating')"
于 2012-05-06T03:57:39.083 に答える
0

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

.patientinfodivs {
    display: none;
}

<div id="firstimpression" class="patientinfodivs" style="display: none;">
于 2012-05-06T04:00:51.150 に答える