我有一个使用HTML,CSS&的代码进行切换按钮JavaScript。该代码的目的是在选中复选框时激活或选择HREF链接。这在jsbin.com上正常工作。但是,当我在Linux平台上在烧瓶服务器上运行时,复选框立即取消选中,以便该按钮切换一秒钟,然后返回OFF位置。我不知道为什么会发生这种情况。
$(function(){
$("input[type='checkbox']").change(function(){
var item=$(this);
if(item.is(":checked"))
{
$('#On').get(0).click();
}
else
{
$('#Off').get(0).click();
}
});
})
$(document).ready(function(){
//$("#Off").hide();
$("#On").click(function(){
$("#On").hide();
$("#Off").show();
});
$("#Off").click(function(){
$("#Off").hide();
$("#On").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
</head>
<body>
<body>
<input type="checkbox" > <br/>
<h1>
<a href="/On" id="On" class="">ON</a>
</h1>
<h1>
<a href="/Off" id="Off" class="off_class">OFF</a>
</h1>
</body>
</body>
</html>
而不是在href
中使用#
,代码正常工作。
$(function() {
$("input[type='checkbox']").change(function() {
var item = $(this);
if (item.is(":checked")) {
$('#On').get(0).click();
} else {
$('#Off').get(0).click();
}
});
})
$(document).ready(function() {
//$("#Off").hide();
$("#On").click(function() {
$("#On").hide();
$("#Off").show();
});
$("#Off").click(function() {
$("#Off").hide();
$("#On").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox"> <br/>
<h1>
<a href="#" id="On" class="">ON</a>
</h1>
<h1>
<a href="#" id="Off" class="off_class">OFF</a>
</h1>