onclick鼠标单击事件控制指定元素的display属性block/none来回期切换

JavaScript lvfhvl 次浏览
<style type="text/css">
.anniu{width:25px; height:25px; overflow:auto; display:inline; text-align:left; background:#E50003; border:0px;}
.ax{text-align:left; line-height:25px;}
</style>

<script language="JavaScript" type="text/JavaScript">
<!--
function toggle(targetid){
if (document.getElementById){
target=document.getElementById(targetid);
if (target.style.display=="block"){
  target.style.display="none";
} else {
  target.style.display="block";
}
}
}
-->
</script>
<li><a href="#" class="ax"/>按钮前文本链接</a><button class="anniu" onclick="toggle('anniu1')" ></button></li>
<div id="anniu1" style="display:none">
<li style="background:#FF0004; width:500px; height:20px;"></li>
</div>
<li><a href="#" class="ax"/>按钮前文本链接</a><button class="anniu" onclick="toggle('anniu2')" ></button></li>
<div id="anniu2" style="display:none">
<li style="background:#FF0004; width:500px; height:20px;"></li>
</div>
以上为鼠标点击事件控制id为指定内容的元素显示与隐藏代码,可实现多行多次单独控制
 
版权所有丨如未注明,均为原创,转载请注明本文固定链接
喜欢 () or分享