我在顶部有 3 个按钮，颜色给定。当我按下按钮时，它会改变颜色，表明已按下以下按钮并且我的提交表单打开。一旦我提交表单消息显示“成功”。但是我的问题是当我按下提交按钮时，顶部按钮的颜色更改为前一个，但我希望它保持不变。我该怎么做，请帮忙!!! 这是我的代码:
这是我更改按钮颜色的 javascript 和 css fr:
<script type="text/javascript">
$(document).ready(function (){
$('.beforeClick').click(function (){
$('.beforeClick').css('background-color',"#C1B0B3");
$(this).css('background-color',"#9C7260");
});
});
<style>
.beforeClick {
margin-left: 0.4%;
background-color:#C1B0B3;
font-weight: bold;
width: 14em;
height: 2em;
}
</style>
这是我的按钮及其形式:
<html>
<body>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260">Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick"> Report3</button>
<script type="text/javascript">
$("#incbutton").click(function() {
$("#form_sub_container1").show();
$("#form_sub_container2").hide();
$("#form_sub_container3").hide();
})
$("#dthbutton").click(function() {
$("#form_sub_container2").show();
$("#form_sub_container1").hide();
$("#form_sub_container3").hide();
})
$("#negbutton").click(function() {
$("#form_sub_container3").show();
$("#form_sub_container1").hide();
$("#form_sub_container2").hide();
})
</script>
<div id="form_sub_container1" style="display:<?= ( isset($_POST['rep']) || (!isset($_POST['report21']) && !isset($_POST['report31'])))? 'block':'none'?>">
//report1 functionalities
<input type="submit" name="rep" value="Save" id="btnsize1" /></td>
</div>
<div id="form_sub_container2" style="display: <?= isset($_POST['report21'])? 'block':'none'?>">
//report2 functionalities
<input type="submit" name="report21" value="Save" id="btnsize2" /></td>
</div>
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
//report3 functionalities
<input type="submit" name="report31" value="Save" id="btnsize3" /></td>
</div>
</body>
<html>
这是我的报告3:
<div id="form_sub_container3" style="display: <?= isset($_POST['report31'])? 'block':'none'?>">
<?php
if (isset($_POST['report31']))
{
$daydropdown111=$_POST['daydropdown111'];
$monthdropdown111=$_POST['monthdropdown111'];
$yeardropdown111=$_POST['yeardropdown111'];
$dreport_place=$_POST['dreport_place'];
$dreport_address=$_POST['dreport_address'];
$dreport_additional=$_POST['dreport_additional'];
}
else
{
$daydropdown111="";
$monthdropdown111="";
$yeardropdown111="";
$dreport_place ="";
$dreport_address="";
$dreport_additional="";
}
if (isset($_POST['report31']))
{
$death = $DataAccessController->death_reports($_POST['daydropdown111'],$_POST['monthdropdown111'],$_POST['yeardropdown111'],$_POST['dreport_place'], $_POST['dreport_address'], $_POST['dreport_additional']);
if ($death) {
echo"<p><font color=red size='5pt' > Your Report has been Registered</font></p>";
}
}
?>
<div id="color" >
<table>
<h1 align="center"><p> Report</h1>
<form action="" method="POST" id="form_id">
<tr><td>Date </td><td>
<select name="daydropdown111" id="daydropdown111"></select>
<select name="monthdropdown111" id="monthdropdown111"></select>
<select name="yeardropdown111" id="yeardropdown111"></select>
<script type="text/javascript">
//populatedropdown(id_of_day_select, id_of_month_select, id_of_year_select)
populatedropdown("daydropdown111", "monthdropdown111", "yeardropdown111")
</script>
</td></tr>
<tr><td></br> Place </td><td></br><select name="dreport_place"id="wgtmsr">
<option value="hospital" >Hospital</option><option value="residence">Residence</option><option value="others">Others</option></select></td></tr>
<tr><td>Address </td><td></br><textarea name="dreport_address" rows="5" cols="32" id="loc" value=""> </textarea></td></tr>
<tr><td>Additional Cases if any</td><td></br> <textarea name="dreport_additional" rows="5" cols="32" id="loc" value=""> </textarea></td></tr></label></td></tr>
<tr><td></td><td><input type="submit" name="report31" value="Save" id="btnsiz" /></td></tr>
</form>
</table></br>
</div>
</div>
最佳答案
不..这是你想要的吗？
$(document).ready(function(){
$('.beforeClick').click(function(){
$(this).css('background-color',"#C1B0B3");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="incbutton" class="beforeClick" style="background-color:#9C7260" >Report1</button>
<button type="button" id="dthbutton" class="beforeClick">Report2</button>
<button type="button" id="negbutton" class="beforeClick">Report3</button>关于javascript - 提交表单后按钮颜色保持不变，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28622750/