[英]Javascript toggling image and div
我正在尝试同时切换图像和切换Div的可见性,这就是到目前为止。 当我单击图像以激活Toggle时,它正在提交表单,这并不理想...
<div class="field">
<script>
function toggle(){
if(el.className!="off")
{
el.src='off.png';
el.className="off";
var div1 = document.getElementById('1')
div1.style.display = 'block'
}
else if(el.className=="off")
{
el.src='on.png';
el.className="on";
var div1 = document.getElementById('1')
div1.style.display = 'none'
}
return false;
}
</script>
<label for="Recurring">Recurring:</label> <input style="width:60px;" type="image" src="on.png" class="on" onclick="toggle();"/></div>
<div style='display:none;' id="1" class="field"><label for="frequency">Please select the frequency:</label><select id="frequency" name="frequency">
<option value>Please Select</option>
<option value="10">10</option>
</select>
</div>
我会稍微更改您的代码,以添加事件侦听器,而不是将javascript注入您的标记(这是首选方法)。 您可以尝试以下代码:
window.onload = function() {
var input = document.getElementById('input');
input.addEventListener('click', toggle);
}
输入将需要id='input
,并且切换功能将需要稍微修改:
function toggle(e){
e.preventDefault();
var el = e.toElement
//rest of code
}
e.preventDefault()可以阻止页面刷新。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.