0

divの表示/非表示に少し問題があります-

基本的に私が達成しようとしているのは、3つの異なるリンクを作成することです。各リンクは3つの異なるdivに対応し、一度に1つだけが表示されます。私はこのチュートリアルを参照しました-http ://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/（セクションの見出し'これは、一度に1つのdivのみが表示されるリクエスト'）

リンクのいずれかをクリックすると、正しいdivが表示されるという点で、すべて正しく機能しています。私が抱えている唯一の問題は初期状態です-最初に最初のdivだけを表示したいのですが、現在、リンクの1つをクリックするまで、すべてが同時に表示されます。

私はウェブサイトにJavaをコピーしました-

<script> function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("class");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }
} </script>

私のdivは次のようになります。

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes">
<div id="newboxes3" class="newboxes">

これらの3つのdivにはすべて、他の多くのdivが含まれていますが、クラスに「newboxes」が含まれているものはありませんが、おそらくこれは干渉しますか？

リンクはこれらの3つのdivの外側にあります。

<a href="javascript:showonlyone('newboxes1');">Learn HTML</a><a href="javascript:showonlyone('newboxes2');">Box2</a><a href="javascript:showonlyone('newboxes3');">Box3</a>

私が見る限り、チュートリアルに示されているメソッドを正確にコピーしましたが、そのため、初期状態は正しく機能しませんが、チュートリアルページでは機能します。

何か案は？ありがとう！

4

3 に答える 3

1 
function showonlyone(element){
    for (var i=0; i<document.getElementsByClassName("newboxes").length; i++){
        var div = document.getElementById('newboxes'+i);
        if(i == element){
            div.style.display = 'block';
        }else{
            div.style.display = 'none';
        }
    }
}

使用する:

showonlyone(1);
//This will show the div with ID="newboxes1"
于 2012-11-21T13:25:38.670 に答える
0

それはそれほど単純ではありませんか

<div id="newboxes1" class="newboxes" style="width: 1124px;">
<div id="newboxes2" class="newboxes" style="display:none;">
<div id="newboxes3" class="newboxes" style="display:none;">
于 2012-11-21T13:16:41.573 に答える
0

ヘッダーでこれを試してください

<script>
    function showonlyone(thechosenone) {
        var newboxes = document.getElementsByTagName("div");
        for (var x = 0; x < newboxes.length; x++) {
            name = newboxes[x].getAttribute("class");
            if (name == 'newboxes') {
                if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
                } else {
                    newboxes[x].style.display = 'none';
                }
            }
        }
    }
</script>

これに続いて、div ボックスとリンクが表示されます

<a id="myHeader1" href="javascript:showonlyone('newboxes1');">Wall Tiles</a>
- <a id="myHeader2" href="javascript:showonlyone('newboxes2');">Floor Tiles</a>
- <a id="myHeader3" href="javascript:showonlyone('newboxes3');">Extras</a>

<div class="newboxes" id="newboxes1">
    <iframe src="wall.php" width="600" height="620" frameborder="0"></iframe>
</div>
<div class="newboxes" id="newboxes2">
    <iframe src="floor.php" width="600" height="620" frameborder="0"></iframe>
</div>
 <div class="newboxes" id="newboxes3">
    <iframe src="extras.php" width="600" height="620" frameborder="0"></iframe>
</div>
于 2013-12-02T16:37:54.320 に答える