javascript - 文本区域未显示正确的列

Question

我有一个小 JavaScript，可以让我显示和隐藏一些文本区域。

我首先显示 1 个文本区域，并使用属性 display:none 隐藏其他 4 个文本区域；

第一个文本区域显示正确，但是当我运行 javascipt 隐藏第一个文本区域并显示其他文本区域之一时，不会读取 cols 属性并且文本区域显示很小。

这是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 为 display:none;

为什么不读取 cols 属性？但最重要的是......如何摆脱这个问题？

谢谢!

Answer 1

首先，我建议您验证 HTML。例如，您在 anchor 元素(内联元素)内有 div 元素( block 元素)，这是无效的。如果您使用 Firefox，我可以推荐这个 HTML 验证器插件:

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