Question

通过我现在设置html和javascript的方式，当页面加载并显示每个按钮下的所有文本时，我就这样了。您可以单击按钮隐藏并在其下方显示文本。

是否有可能使所有文本默认不显示？

我原以为你必须默认制作e.style.display =“none”，但我不确定在这种特殊情况下如何/在哪里。

<script type="text/javascript">

function toggleMe(a)
{
var e=document.getElementById(a);

if(!e)
{

return true;
}

if(e.style.display=="none")
{
e.style.display="block"
}
else
{
e.style.display="none"
}
return true;
}
</script>

<input type="button" onclick="return toggleMe('para1')" value="Toggle"><br>
<p id="para1">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
</p>
<br>
<input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
<div id="para2">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

</div>
<br>
<input type="button" onclick="return toggleMe('para3')" value="Toggle"><br>
<span id="para3">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah

</span>

Answer 1

如果您向页面添加以下样式，默认情况下将隐藏段落。

<style>
    #para1, #para2{
        display:none;
    }
</style>

Answer 2

为默认隐藏的每个元素创建一个类，我

<p class="hidden">some hidden text</p>
<p class="hidden">more hidden text</p>

<style>
    .hidden
    {
        display:none;
    }
</style>

Answer 3

<强> CSS

首先，添加这段代码以使CSS类隐藏。

<style>
.hidden { display: none }
</style>

然后，将此类添加到默认情况下要隐藏的任何元素。例如，

<p id="para1" class="hidden">

此外，这里有一个简短的 DEMO ，介绍如何使用jQuery缩短所有代码。您可以使用toggleClass()函数轻松添加/删除（切换）类。

Html / Javascript：默认情况下是否可以设置文本style.display =“none”？

3 个答案: