简体   繁体   English

HTML / Javascript:默认情况下是否可以设置文本样式。display=“ none”?

[英]Html/Javascript: Is it possible to set text style.display = “none” by default?

With the way I have my html and javascript set up right now, I have it so when the page loads up and shows up all the text under each button. 通过现在设置我的html和javascript的方式,我可以在页面加载并显示每个按钮下的所有文本时使用它。 You can click the button to hide and show the text right below it. 您可以单击该按钮以隐藏并在其下方显示文本。

Is it possible to make it so all the text does NOT show up by default? 是否有可能使默认情况下不显示所有文本?

I was thinking you would have to make e.style.display = "none" by default but I'm not sure how/where to in this particular case. 我以为您默认情况下必须使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>

if you add the following styles to your page, the paragraphs will be hidden by default. 如果在页面上添加以下样式,则默认情况下段落将被隐藏。

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

make a class for each element you want hidden by defaut, ie 为您要通过defaut隐藏的每个元素创建一个类,即

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

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

CSS CSS

First, add this bit of code in order to have a CSS class to make things hidden. 首先,添加以下代码以使CSS类隐藏事物。

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

And then, add this class to whichever elements you want hidden by default. 然后,将该类添加到默认情况下要隐藏的任何元素。 For example, 例如,

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

Also, here's a short DEMO on how you might shorten all that code using jQuery. 另外,这是一个简短的演示 ,介绍了如何使用jQuery缩短所有代码。 There's a toggleClass() function that you can use to easily add / remove (toggle) a class. 有一个toggleClass()函数,可用于轻松添加/删除(切换)类。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM