0 
<script type="text/javascript">
var _hidediv = null;
function showdiv(id) {
    if(_hidediv)
        _hidediv();
    var div = document.getElementById(id);
    div.style.display = 'block';
    _hidediv = function () { div.style.display = 'none'; };
}
</script>


#nav li { width: 100px; height: 20px; margin: 2px; background: green; cursor: pointer; }
#filtration {
    display: none;
    width: 100px; height: 100px;
    background: #000;
}
#solid {
    display: none;
    width: 100px; height: 100px;
    background: #c0c0c0;
}    
#chemistry {
    display: none;
    width: 100px; height: 100px;
    background: red;
}


<ul id="nav">
    <li onclick="showdiv('filtration');">Filtration</li>
    <li onclick="showdiv('solid');">Solidification</li>
    <li onclick="showdiv('chemistry');">Chemistry</li>
</ul>

<div id="filtration">&nbsp;</div>
<div id="solid">&nbsp;</div>
<div id="chemistry">&nbsp;</div>​

コンテンツを表示/非表示にするナビゲーション バーを設定すると、上記のコードは正常に動作しますが、問題は、最初にページにアクセスしたときに 1 つの div にコンテンツを表示することです。上記のコードは、すべての div が最初に非表示になっている場合にのみ機能します。

1 つの div を display:block に設定できますが、表示されているもの以外の別のナビゲーション リンクをクリックしても何も起こりません。最初に display:block に設定されている対応する div のリンクをクリックする必要があります。その後、他のリンクをクリックすることに進むことができますが、役に立ちません。

最初のコンテンツ div (#filtration) が最初に display:block に設定されるようにこれを変更するにはどうすればよいですか? その後、ユーザーは UL 内の任意のリンクをクリックしてそのコンテンツを表示できますか?

http://jsfiddle.net/2MpmK/3/

ありがとう！

4

2 に答える 2

3

選択した div を表示する前に、他の div を非表示にする必要があります。

function showdiv(id) {
    var divs = document.getElementsByTagName('div'),
        div  = document.getElementById(id);
    for (var i=0; i<divs.length; i++) {
        divs[i].style.display = 'none';
    }
    div.style.display = 'block';
}
​

フィドル

または、jQuery を使用し、これらの onclick 関数を使用せずに実行できます。

<ul id="nav">
    <li data-id="filtration">Filtration</li>
    <li data-id="solid">Solidification</li>
    <li data-id="chemistry">Chemistry</li>
</ul>

--

$(function() {
    $('#nav li').on('click', function() {
        $('#'+$(this).data('id')).show().siblings('div').hide();
    });
});
​

フィドル

于 2012-11-29T15:43:25.663 に答える
0

jquery を使用:

function showdiv(id) 
{
    $('.content').hide();
    $('#'+id).toggle();
}

#filtration {
    width: 100px; height: 100px;
    background: #000;
}
​
<div id="filtration" class="content">&nbsp;</div>
<div id="solid" class="content">&nbsp;</div>
<div id="chemistry" class="content">&nbsp;</div>​

</p>

于 2012-11-29T15:50:22.133 に答える