选择单选按钮后更改选项卡颜色

时间：2017-12-12 14:12:36

标签： javascript php html css

我目前正在开展技能测试项目，该项目在每个标签上显示一个问题，答案的选项是单选按钮。我想在选择单选按钮时（当用户回答问题时）更改选项卡的颜色，以便表明问题已经得到解答。我希望有人可以帮助我，因为我是新来的..非常感谢你！这是我的代码：

（我没有包含我的代码的某些部分，因为我没有看到它们相关，并且我的问题很简短）

风格：

div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

div.tab button {
    background-color: inherit;
    float: left;
    border: 1px solid #ccc;
    outline: none;
    cursor: pointer;
    padding: 13px 12.62px;
    transition: 0.3s;
    font-size: 10px;
}

div.tab button:hover {
    background-color: #ddd;
}

div.tab button.active {
    background-color: #d6f5d6;
}

.tabcontent {
    display: none;
    border: 1px solid #ccc;
    border-top: none;
}

体：

<body onload="document.getElementById('defaultOpen').click();">
 <script>
  $(document).ready(function(){
    $(".nav-tabs a").click(function(){
        $(this).tab('show');
    });
  });
 </script>

<div class="col-md-auto col-md-offset-1 col-centered">
    <div class="panel panel-success">
        <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }
        document.getElementById("defaultOpen").click();

        </script>

        <div class="tab">
          <button class="tablinks active" type="button" onclick="openTab(event, 'q1')" id="defaultOpen"></button>
          <button class="tablinks" type="button" onclick="openTab(event, 'q2')"></button>
          <button class="tablinks" type="button" onclick="openTab(event, 'q3')"></button>
          <button class="tablinks" type="button" onclick="openTab(event, 'q4')"></button>
          <button class="tablinks" type="button" onclick="openTab(event, 'q5')"></button>
        </div>            

        <?php if (mysqli_num_rows($result) > 0): ?>
        <?php $index = 0; $num=0; ?>
                <div id="q<?php echo ($index++); ?>" class="tabcontent">
                    <table class="table table-hover">
                    <tbody>
                        <tr class="form-group">   
                            <h3 name="ques[<?php echo $test_id;?>]" style="text-indent: 40px;"> <?php echo $num,'. ', $question; ?> </h3>
                        </tr>
                        <tr class="form-group">
                            <label class="radio-inline" style="text-indent: 70px; font-size: 18px;">
                                 &nbsp;&nbsp;<input style="font-size: 18px;" type="radio" name="ans[<?php echo $test_id;?>]" value="<?php echo $optiona;?>"><?php echo $optiona;?> 
                            </label>
                            <br>
                            <label class="radio-inline" style="text-indent: 70px; font-size: 18px;">
                                 &nbsp;&nbsp;<input style="font-size: 18px;" type="radio" name="ans[<?php echo $test_id;?>]" value="<?php echo $optionb;?>"><?php echo $optionb; ?> 
                            </label>
                            <br>
                            <label class="radio-inline" style="text-indent: 70px; font-size: 18px;">
                                 &nbsp;&nbsp;<input style="font-size: 18px;" type="radio" name="ans[<?php echo $test_id;?>]" value="<?php echo $optionc;?>"><?php echo $optionc;?> 
                            </label>
                            <br>
                            <label class="radio-inline" style="text-indent: 70px; font-size: 18px;">
                                 &nbsp;&nbsp;<input style="font-size: 18px;" type="radio" name="ans[<?php echo $test_id;?>]" value="<?php echo $optiond;?>"><?php echo $optiond;?>
                            </label>
                            <br>
                        </tr>
                    </tbody>
                    </table>
                    <center>
                        <button class="btn btn-default btnBack" data-direction="back" type="button" onclick="openTab(event, 'q<?php echo ($index-=1); ?>')"><span class="glyphicon glyphicon-triangle-left"></span>   Back</button>
                        <button class="btn btn-default btnNext" data-direction="next" type="button" onclick="openTab(event, 'q<?php echo ($index+=1); ?>')"><span class="glyphicon glyphicon-triangle-right"></span>  Next</button>
                    </center>
                    <br>  
                </div>
            <?php $num++; ?>
        <?php endif ?>
    </div>
    </div>
</div>
</body>

1 个答案:

答案 0 :(得分：0)

我制作了你的代码的JSbin：

https://jsbin.com/conuhow/edit?js,console,output

它有一些变化（没有PHP部分）所以你可以查看。

希望这有帮助！玩得开心！

Code Bellow：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Questions</title>
<script language="javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

    <body onload="document.getElementById('defaultOpen').click();">

    <style>

        div.tab {
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        div.tab button {
            background-color: inherit;
            float: left;
            border: 1px solid #ccc;
            outline: none;
            cursor: pointer;
            padding: 13px 12.62px;
            transition: 0.3s;
            font-size: 10px;
        }

        div.tab button:hover {
            background-color: #ddd;
        }

        div.tab button.active {
            background-color: #d6f5d6 !important;
        }

        .input-style {
          font-size: 18px;
          text-indent: 70px;
        }

        .tabcontent {
            display: none;
            border: 1px solid #ccc;
            border-top: none;
        }

        .btnSend {
            background-color: rgba(94,191,79,1.00);
            color: #fff;
            border: 0px;
            padding: 15px;
            border-radius: 7px;
        }

        .tabchanged {
            background-color: rgba(41,215,217,1.00) !important;
        }


    </style>

    <script>

        var questionSelected = 1;
        var questionsReply = {
            "question1" : 0,
            "question2" : 0,
            "question3" : 0,
            "question4" : 0,
            "question5" : 0
        };

        $(document).ready(function(){
            $(".nav-tabs a").click(function(){
                $(this).tab('show');
            });

            $(".answer").click(function(){
                var clickedquestion = $(this).attr("question");
                var clickedanswer = $(this).attr("answer");
                if (clickedquestion == 1) { questionsReply.question1 = clickedanswer; }
                else if (clickedquestion == 2) { questionsReply.question2 = clickedanswer }
                else if (clickedquestion == 3) { questionsReply.question3 = clickedanswer }
                else if (clickedquestion == 4) { questionsReply.question4 = clickedanswer }
                else if (clickedquestion == 5) { questionsReply.question5 = clickedanswer }
            });         
        });

        function sendResult() {
            alert("Object of Answers (PARSE JSON TO PHP BACK-END):", questionsReply);
        }

        function openTab(evt, tabName) {

          questionSelected = tabName;
          console.log("Tab: " + questionSelected);
          console.log("Array of Answers :", questionsReply);

          $(".tabcontent").hide();
          $(".tablinks").removeClass('active');
          $("#q"+tabName).show();

          //COLORTABS before .active background;
          colorTabs();
          $(".tablinks[tabid="+questionSelected+"]").addClass("active");

          evt.currentTarget.className += " active";

          if (questionSelected = 1) { 
            if (questionsReply.question1 != 0) {
                var answer_selected = questionSelected.question1;
                if (answer_selected != undefined) {
                    $(".answer[question="+questionSelected+", answer="+answer_selected+"]").attr("checked ", "true");
                }
            }
          }
          else if (questionSelected = 2) { 
            if (questionsReply.question2 != 0) {
                var answer_selected = questionSelected.question2;
                if (answer_selected != undefined) {
                    alert("Entrou aqui - 2! " + answer_selected);
                    $(".answer[question="+questionSelected+", answer="+answer_selected+"]").attr("checked ", "true");
                }
            }
          }
          else if (questionSelected = 3) { 
            if (questionsReply.question3 != 0) {
                var answer_selected = questionSelected.question3;
                if (answer_selected != undefined) {
                    alert("Entrou aqui - 3! " + answer_selected);
                    $(".answer[question="+questionSelected+", answer="+answer_selected+"]").attr("checked ", "true");
                }
            }
          }
          else if (questionSelected = 4) { 
            if (questionsReply.question4 != 0) {
                var answer_selected = questionSelected.question4;
                if (answer_selected != undefined) {
                    alert("Entrou aqui - 4! " + answer_selected);
                    $(".answer[question="+questionSelected+", answer="+answer_selected+"]").attr("checked ", "true");
                }
            }
          } 
          else if (questionSelected = 5) { 
            if (questionsReply.question5 != 0) {
                var answer_selected = questionSelected.question5;
                if (answer_selected != undefined) {
                    alert("Entrou aqui - 5! " + answer_selected);
                    $(".answer[question="+questionSelected+", answer="+answer_selected+"]").attr("checked ", "true");
                }
            }
          }

        }

        function colorTabs() {
            if (questionsReply.question1 != 0) { $(".tablinks[tabid='1']").addClass("tabchanged"); }
            if (questionsReply.question2 != 0) { $(".tablinks[tabid='2']").addClass("tabchanged"); }
            if (questionsReply.question3 != 0) { $(".tablinks[tabid='3']").addClass("tabchanged"); }
            if (questionsReply.question4 != 0) { $(".tablinks[tabid='4']").addClass("tabchanged"); }
            if (questionsReply.question5 != 0) { $(".tablinks[tabid='5']").addClass("tabchanged"); }
        }

        document.getElementById("defaultOpen").click();

    </script>

    <div class="col-md-auto col-md-offset-1 col-centered">
        <div class="panel panel-success">

            <div class="tab">
              <button class="tablinks active" tabid="1" type="button" onclick="openTab(event, 1)" id="defaultOpen"></button>
              <button class="tablinks" tabid="2" type="button" onclick="openTab(event, 2)"></button>
              <button class="tablinks" tabid="3" type="button" onclick="openTab(event, 3)"></button>
              <button class="tablinks" tabid="4" type="button" onclick="openTab(event, 4)"></button>
              <button class="tablinks" tabid="5" type="button" onclick="openTab(event, 5)"></button>
            </div>            

            <div id="q1" class="tabcontent">
                <table class="table table-hover">
                <tbody>
                    <tr class="form-group">   
                        <h3 name="ques[1]" style="text-indent: 40px;"></h3>
                    </tr>
                    <tr class="form-group">
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta1" type="radio" question="1" answer="1" value="a">Question 1 - Answer 01</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta1" type="radio" question="1" answer="2" value="b">Question 1 - Answer 02</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta1" type="radio" question="1" answer="3" value="c">Question 1 - Answer 03</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta1" type="radio" question="1" answer="4" value="d">Question 1 - Answer 04</label><br>
                    </tr>
                </tbody>
                </table>
                <center>
                    <button class="btn btn-default btnNext" data-direction="next" type="button" onclick="openTab(event, 2)"><span class="glyphicon glyphicon-triangle-right"></span> Next</button>
                </center>
                <br>  
            </div>

            <div id="q2" class="tabcontent">
                <table class="table table-hover">
                <tbody>
                    <tr class="form-group">   
                        <h3 name="ques[2]" style="text-indent: 40px;"></h3>
                    </tr>
                    <tr class="form-group">
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta2" type="radio" question="2" answer="1" value="a">Question 2 - Answer 01</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta2" type="radio" question="2" answer="2" value="b">Question 2 - Answer 02</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta2" type="radio" question="2" answer="3" value="c">Question 2 - Answer 03</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta2" type="radio" question="2" answer="4" value="d">Question 2 - Answer 04</label><br>
                    </tr>
                </tbody>
                </table>
                <center>
                    <button class="btn btn-default btnBack" data-direction="back" type="button" onclick="openTab(event, 1)"><span class="glyphicon glyphicon-triangle-left"></span> Back</button>
                    <button class="btn btn-default btnNext" data-direction="next" type="button" onclick="openTab(event, 3)"><span class="glyphicon glyphicon-triangle-right"></span> Next</button>
                </center>
                <br>  
            </div>

            <div id="q3" class="tabcontent">
                <table class="table table-hover">
                <tbody>
                    <tr class="form-group">   
                        <h3 name="ques[3]" style="text-indent: 40px;"></h3>
                    </tr>
                    <tr class="form-group">
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta3" type="radio" question="3" answer="1" value="a">Question 3 - Answer 01</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta3" type="radio" question="3" answer="2" value="b">Question 3 - Answer 02</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta3" type="radio" question="3" answer="3" value="c">Question 3 - Answer 03</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta3" type="radio" question="3" answer="4" value="d">Question 3 - Answer 04</label><br>
                    </tr>
                </tbody>
                </table>
                <center>
                    <button class="btn btn-default btnBack" data-direction="back" type="button" onclick="openTab(event, 2)"><span class="glyphicon glyphicon-triangle-left"></span> Back</button>
                    <button class="btn btn-default btnNext" data-direction="next" type="button" onclick="openTab(event, 4)"><span class="glyphicon glyphicon-triangle-right"></span> Next</button>
                </center>
                <br>  
            </div>

            <div id="q4" class="tabcontent">
                <table class="table table-hover">
                <tbody>
                    <tr class="form-group">   
                        <h3 name="ques[4]" style="text-indent: 40px;"></h3>
                    </tr>
                    <tr class="form-group">
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta4" type="radio" question="4" answer="1" value="a">Question 4 - Answer 01</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta4" type="radio" question="4" answer="2" value="b">Question 4 - Answer 02</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta4" type="radio" question="4" answer="3" value="c">Question 4 - Answer 03</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta4" type="radio" question="4" answer="4" value="d">Question 4 - Answer 04</label><br>
                    </tr>
                </tbody>
                </table>
                <center>
                    <button class="btn btn-default btnBack" data-direction="back" type="button" onclick="openTab(event, 3)"><span class="glyphicon glyphicon-triangle-left"></span> Back</button>
                    <button class="btn btn-default btnNext" data-direction="next" type="button" onclick="openTab(event, 5)"><span class="glyphicon glyphicon-triangle-right"></span> Next</button>
                </center>
                <br>  
            </div>

            <div id="q5" class="tabcontent">
                <table class="table table-hover">
                <tbody>
                    <tr class="form-group">   
                        <h3 name="ques[5]" style="text-indent: 40px;"></h3>
                    </tr>
                    <tr class="form-group">
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta5" type="radio" question="5" answer="1" value="a">Question 5 - Answer 01</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta5" type="radio" question="5" answer="2" value="b">Question 5 - Answer 02</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta5" type="radio" question="5" answer="3" value="c">Question 5 - Answer 03</label><br>
                        <label class="radio-inline input-style"><input class="input-style answer" name="resposta5" type="radio" question="5" answer="4" value="d">Question 5 - Answer 04</label><br>
                    </tr>
                </tbody>
                </table>
                <center>
                    <button class="btn btn-default btnBack" data-direction="back" type="button" onclick="openTab(event, 4)"><span class="glyphicon glyphicon-triangle-left"></span> Back</button>

                    <button class="btn btn-default btnSend" data-direction="back" type="button" onclick="sendResult()"><span class="glyphicon glyphicon-triangle-left"></span> SEND</button>
                </center>
                <br>  
            </div>

        </div>
    </div>

</body>

</html>
相关问题
最新问题