Question

我有4位专业教授A，B教授，C教授和D教授。

我想要的是，当用户点击Prof A按钮时，Prof A颜色将为深色，所有剩余的彩色按钮将为灰色。

当我点击下一个按钮时，所选的Prof A将被保存到数据库中，下一个按钮应该要求选择Prof按钮。

我的profession.jsp页面代码如下所示

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Profession</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function() {
        var reqJSONObj = '${reqJSONObj}';
        reqJSONObj = reqJSONObj.replace("/", "'");
        var _parseJson = JSON.parse(reqJSONObj);
        var orgName = _parseJson['orgName'];
        document.getElementById('lblsuccessMsg').innerHTML = "sucsess - '&lt;" + orgName + "&gt; has an agreement";
        if (reqJSONObj == "" || reqJSONObj == null) {
            window.location.href = "index.jsp";
        }
    });
</script>
</head>
<body>
    <form name="form_profession" action="org_name" method="post">
        <div class="container-fluid orgdiv">
            <div class="topgreen" style="">
                <p>
                    <i class="fa fa-check"></i> <span id="lblsuccessMsg"></span>
                </p>
            </div>
            <div class=" text-center topbgimage">
                <img src="images/bg.jpg" class="" style="max-width: 100%;">
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-sm-12  heading text-center"
                        style="text-align: center;">
                        <h1 class="">Profession</h1>
                        <p>
                            Select Your Profession So we can Provide you with appropriate service
                        </p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-12">
                        <div class="col-md-3 col-sm-3 box">
                            <h2>Prof A</h2>
                        </div>
                        <div class="col-md-3 col-sm-3 box">
                            <h2>Prof B</h2>
                        </div>
                        <div class="col-md-3 col-sm-3 box">
                            <h2>Prof C</h2>
                        </div>
                        <div class="col-md-3 col-sm-3 box">
                            <h2>Prof D</h2>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 text-center footerdiv" style="text-align: center;">
                <input type="submit" class="bg-primary btn" name="btnProfession" id="btnProfession" value="Next" />
            </div>
        </div>
    </form>
</body>
</html>

Answer 1

这就是你要找的东西 - https://jsfiddle.net/ToddNewent/rredqa2k/1/

HTML

<body>
  <form id="form" name="form_profession" action="org_name" method="post">
    <div class="container-fluid orgdiv">
      <div class="topgreen" style="">
        <p>
          <i class="fa fa-check"></i> <span id="lblsuccessMsg"></span>
        </p>
      </div>

      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <div class="a col-md-3 col-sm-3 box">
              <h2 class="a">Prof A</h2>
            </div>
            <div class="b col-md-3 col-sm-3 box">
              <h2 class="b">Prof B</h2>
            </div>
            <div class="c col-md-3 col-sm-3 box">
              <h2 class="c">Prof C</h2>
            </div>
            <div class="d col-md-3 col-sm-3 box">
              <h2 class="d">Prof D</h2>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 text-center footerdiv" style="text-align: center;">
        <input type="submit" class="bg-primary btn" name="btnProfession" id="btnProfession" value="Next" />
      </div>
    </div>
  </form>
</body>

CSS

h2{
  color:white;
}
.row{
  min-width:440px;
  width:100%;
  padding-bottom:4%;
}

.box{
  display:inline-block;
  width:20%;
  padding:2%;
  border-radius:12px;
  background-color:blue;
  text-align:center;
}

#btnProfession{
  display:block;
  margin:0 auto;
  border-radius:12px;
  background-color:blue;
  color:white;
  text-align:center;
  width:20%;
  padding:2%;
}

的JavaScript

$('.row').on('click',function(e){
   $('.a, .b, .c, .d').css('backgroundColor','gray');
   $("." + e.target.className[0]).css('backgroundColor','darkblue');
});

HTML选中的矩形框

1 个答案: