Question

我基本上想在点击后禁用Rollout和rollover功能。我尝试了一个if参数，但我无法让它工作。对不起，我是一个真正的初学者。

我已经实现了通过在母div中单击来更改文本但仍然无法禁用其他功能。

<!DOCTYPE html>
<html>
<head>
    <link href="styles/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="script.js"></script>

</head>
<script>

var Enabled = true;    
function down() 
{
document.getElementById("button").src = "images/click.png"; }   


var Enabled = true;
function rollover()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/on.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
} 

var Enabled = true;
function rollout()
{
if(Enabled == true)
{
document.getElementById("button").src = "images/off.png";
}else
{
document.getElementById("button").src = "images/click.png";
}
} 


function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

<script/>

<body> 


<h1>My Web Page</h1>


<div class="test1">
<button type="button" onclick="myFunction()">Try it</button>
</div>


<div class="row">
    <div class="col"><p id="demo">A Paragraph</p></div>
    <div class="col"><img src="images/off.png" id="button" 
onMouseOver="rollover ()" onMouseOut="rollout ()" 
onMouseDown="down()"
onClick="myFunction()"
onClick="this.innerHTML=down()
onMouseUp="rollover ()";/></div>

<div class="col">col3</div>
    </div>


</body>
</html>

Answer 1

检查出solution，点击它时调用down（）将Enabled设置为false并对图像进行处理，现在当你翻转并推出时，它会检查Enabled是否为true，如果它不是改变形象。

history.pushState

Answer 2

我找到了傻瓜：）

它有点棘手，但有效：）

我更改div而不是禁用按钮状态的功能。

所以这是：

function showDiv() {
document.getElementById('button2').style.display = "block";
document.getElementById("button").style.display = "none";
}

Button2现在是单击的按钮状态，button是所有其他状态所在的div。这样点击后它就会保持点击状态，点击后我摆脱了其他按钮状态：）

单击后如何使图像按钮保持点击状态

2 个答案: