1
現在、各タブに1つの質問を表示するスキルテストプロジェクトで作業しています。回答の選択肢はラジオボタンです。ラジオボタンが選択されたとき（ユーザーが質問に回答したとき）にタブの色を変更して、質問にすでに回答したことを示すようにしたい。私は誰かが私にこの新しいことを教えてくれることを願っています..ありがとうございました！ここに私のコードです：ラジオボタンが既に選択されているときのタブの色の変更
（私は、関連する彼らを見て、私の質問を短くするためにいけないので、私は私のコードの一部が含まれてdidntの）
スタイル：
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;">
<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;">
<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;">
<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;">
<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>
は、あなたのREPONSEのための先生に感謝し、それは私のために少し複雑です。データベースからの質問は、各タブに無作為に表示する必要があります。なぜ私はループを使用したのですか。 – Dza
ループをそのまま使用して、コードを適応させてください。私はjsbin上で動作するのを見ることができるように削除しました！ –
ありがとうございます、しかし、私はまだPHPの新しい、私は上のコードを適応させるここで苦労している。 – Dza