0

私はdivのクラスを持っています（それらは5つあります）。私のCSSでは、そのクラスをに設定しましたdisplay:none;。各divには一意のIDもあります。JSを使用して、これらのdivを個別に表示したいと思います。

このようなもの：

<style>
.hidden{
     display:none; }
</style>
<script>
function displayDiv1(){
    document.getElementById('div1').style.display = "block"; }
function displayDiv2(){
    document.getElementById('div2').style.display = "block"; }
</script>
<div class="hidden" id="div1">
<p>some stuff here</p>
</div>
<div class="hidden" id="div2">
<p>some more stuff here</p>
</div>

これがjfiddleです（機能していません）http://jsfiddle.net/DAzZT/

このようなことを行うことは可能ですか、それとも、ではなくをdiv display:none;使用してそれぞれを個別に宣言する必要がありますか？idclass

4

7 に答える 7

1

質問で行ったように、関数を正しいスコープに配置し、 を使用するだけdocument.getElementByIdです。左側の onLoad オプションを no wrap(body) に変更します

于 2012-11-06T07:32:34.107 に答える
1

このフィドルを試してください

ドキュメントオブジェクトを使用して呼び出す必要があります

function display1(){
document.getElementById('div1').style.display = "block";
}
function display2(){
 document.getElementById('div2').style.display = "block"; 
}
于 2012-11-06T07:34:13.103 に答える
1

そのためにjQueryを使用できます。あなたが言ったように、あなたはあなたのcssでdisplay: noneを設定し、その後jQueryを使って$('#element').show();を持っています。- 表示するには $('#element').hide() で非表示にします。

于 2012-11-06T07:34:03.683 に答える
1

問題はgetElementById、書く必要があるだけですdocument.getElementById。そして、同じ仕事をする関数を 1 つだけ作成します。

function showDiv(id) {
    document.getElementById(id).style.display = "block";
    return false;
}

あれを呼べ：

<a href="#" onclick="return showDiv('your_div_id');">Show Div</a>
于 2012-11-06T07:37:35.977 に答える
1

まず、コードに 1 つのエラーがありますが、それは ではありdocument.getElementByIdませんgetElementById。

また、フィドルで1つの間違いをしました。コードをonLoad関数にラップすることを選択しました。これにより、実際の JavaScript は次のようになります。

window.addEvent('load', function() {
    function display1(){
        document.getElementById('div1').style.display = "block";
    }
    function display2(){
        document.getElementById('div2').style.display = "block"; 
    }
});

関数定義は関数内にあり、グローバル スコープではアクセスできません。したがって、リンクの 1 つをクリックすると、Uncaught ReferenceError.

この問題を解決するには、コードを関数にラップしないように設定することができます (フレームワークの選択の下の左側にある最初のドロップダウンを選択するno wrap (head)か、no wrap (body).

または、関数をグローバルwindowオブジェクトに追加し、onLoadラッピングを維持してコードを変更することをお勧めします。

window.display1 = function(){
    document.getElementById('div1').style.display = "block";
}
window.display2 = funnction(){
    document.getElementById('div2').style.display = "block"; 
}
于 2012-11-06T07:48:19.383 に答える
1

JavaScript関数のdocument.getElementById代わりに試してくださいgetElementById

于 2012-11-06T07:48:36.027 に答える
0

簡単な解決策は次のとおりです。

<script>
    function display(num){
       document.getElementById('div'+num).style.display = "block";
       return false;
    }
</script>
<a href="#" onclick="return display(1);">Open Div 1</a><br />
<a href="#" onclick="return display(2);">Open Div 2</a>

デモンストレーションposition:absolute(両方の div が表示されるように、あなたを削除しました)

于 2012-11-06T07:35:31.823 に答える