2011-05-12 13 views
0

私はいくつかのテキストエリアを表示したり隠したりできる小さなJavaScriptを用意しています。javascript - textareasは正しいコラムで表示されません

1つのテキストエリアで表示され、もう1つはプロパティで非表示になります。

最初のテキストエリアが正しく表示されますが、最初に非表示にするjavasciptを実行し、他のテキストエリアの1つを表示すると、colsプロパティは読み込まれず、textareaは小さく表示されます。ここ

はJSコードである:

<script language="javascript"> 
function collapser(tab_id) { 

    document.getElementById("new_page_content_it").style.display = "none"; 
    document.getElementById("new_page_content_en").style.display = "none"; 
    document.getElementById("new_page_content_fr").style.display = "none"; 
    document.getElementById("new_page_content_es").style.display = "none"; 
    document.getElementById("new_page_content_de").style.display = "none"; 

    document.getElementById(tab_id).style.display = "block"; 

} 
</script> 

そしてここHTMLがある:

<div id="new_page_tab_container"> 
    <a href="#" OnClick="javascript:collapser('new_page_content_it')"> 
     <div id="new_page_tab_it">Italian</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_en')"> 
     <div id="new_page_tab_en">English</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_fr')"> 
     <div id="new_page_tab_fr">French</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_es')"> 
     <div id="new_page_tab_es">Spanish</div> 
    </a> 
    <a href="#" OnClick="javascript:collapser('new_page_content_de')"> 
     <div id="new_page_tab_de">German</div> 
    </a> 
</div> 
<div id="new_page_content_it"> 
    <textarea name="content_it" id="content_it" cols="90" rows="40">italian</textarea> 
</div> 
<div id="new_page_content_en"> 
    <textarea name="content_en" id="content_en" cols="90" rows="40">english</textarea> 
</div> 
<div id="new_page_content_fr"> 
    <textarea name="content_fr" id="content_fr" cols="90" rows="40">french</textarea> 
</div> 
<div id="new_page_content_es"> 
    <textarea name="content_es" id="content_es" cols="90" rows="40">spanish</textarea> 
</div> 
<div id="new_page_content_de"> 
    <textarea name="content_de" id="content_de" cols="90" rows="40">german</textarea> 
</div> 
<div id="new_page_save"> 
    <input type="submit" value="Salva"/> 
</div> 

CSSは可視content_itが、ディスプレイのような任意の他のcontent_xx定義:なし。

なぜcolsプロパティが読み込まれないのですか?しかし、最も重要な...この問題を取り除く方法は?

ありがとうございます!

+0

:Firefoxを使用している場合、私は、このHTMLバリデータのプラグインをお勧めすることができますか? –

+0

jsfiddleで問題を再現できますか? http://jsfiddle.net/6p2cz/ Chromeでうまく動作するコード12.0.742.30 – WSkid

+0

私はFF4、Chrome、Safari、IE8、IE7、Opera 11などでこれを試しました。 – tradyblix

答えて

0

まず、HTMLの検証をお勧めします。例えば、有効でないアンカー要素(インライン要素)内にdiv要素(ブロック要素)があるとします。お使いのブラウザ

http://users.skynet.be/mgueury/mozilla/

関連する問題