javascript点击按钮,实现隐藏显示切换效果。

javascript点击按钮,实现隐藏显示切换效果。
此示例共享单击按钮来实现隐藏和显示的切换代码,供您参考详情如下

设计素描 uff1a

在许多应用中,都有这样的功能。单击同一按钮可以实现元素的显示和隐藏开关。下面是一个通过代码示例来实现这种效果的案例研究。代码如下:

隐藏和显示

# thediv
{
宽度:200px;
身高:100px;
行高:100px;
文本对齐:中心;
背景颜色:绿色;
}
功能show_hidden(obj)
{
如果(obj。风格。显示= =块)
{
obj显示=没有人的风格;
}
其他的
{
obj。风格显示=阻止;
}
}
窗口的指针()函数
{
无功olink = document.getelementbyid(链接);
无功odiv = document.getelementbyid(thediv );
olink onclick=函数()。
{
show_hidden(odiv);
返回false;
}
}
显示隐藏开关
欢迎光临

以上代码已经达到了我们的要求,并点击顶部的链接来实现div显示和隐藏切换,下面是实现过程。

实现原理:

对于注册链接的onclick事件处理程序,该函数可以确定DIV块style.display值,如果设置为无,这是设置div为隐藏状态,否则设置为块,设置div的显示状态,类似的原则。需要特别注意的是,在div,风格=显示使用:块做一个obj.style.display声明得到该属性的值,否则第一次点击div不能设置为隐藏,我们可以做些什么来消除风格=显示:块返回检验,虚假陈述是防止跳链路的影响

返回false,你可以参考这篇文章:回到学习jquey 假

以上是本文的全部内容,希望能对大家有所帮助。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部