我在列表中有未解决的div类。如果我单击下一个按钮，它应该隐藏当前div并转到下一个div。
这里我有8个div。 3,5,7,8有没有答复的课程。如果我点击＆＃34; 3＆＃34;的下一个按钮DIV。它应切换到＆＃34; 5＆＃34; div。剩下的＆＃34; 3,7,8＆＃34;应该显示无。我需要自定义这个吗？
$(document).ready(function() {
$('ul.tabs').tabs();
});.quiz-container h1 {
text-align: center;
color: #fff;
margin-bottom: 10px;
}
.quiz-container .box{
padding: 10px 15px;
}
.quiz-container .box label{
cursor:pointer;
}
.quiz-container .question {
background-color: #170092;
margin-bottom: 25px;
font-size: 115%;
color:#fff;
padding-top: 20px;
padding-bottom: 20px;
position: relative;
}
.quiz-container .question:after {
content: "";
position: absolute;
bottom: -15px;
left: 35px;
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #170092;
}
.quiz-container .question span.question_number_quiz {
background-color:#170092;
color: white;
display: block;
float: left;
margin-left: -15px;
margin-top: -10px;
margin-right: 0px;
padding: 10px 10px;
text-align: center;
text-transform: uppercase;
width: 40px;
}
.quiz-container .answers {
padding-left: 0;
list-style-type: none;
}
.quiz-container .answers .answer {
background-color: #fff;
color: #727272;
border:1px solid #eee;
margin-bottom: 10px;
position: relative;
}
.quiz-container .answers .answer:hover, .quiz-container .answers .answer.active {
cursor: pointer;
color: #170092;
border:1px solid #170092;
}
.quiz-container .answers .answer:hover span:not([class^="checkmark"]), .quiz-container .answers .answer.active span:not([class^="checkmark"]) {
background-color: #170092;
}
.quiz-container .answers .answer.active span.checkmark {
background-color: #fff;
position: absolute;
top: 8px;
right: 20px;
font-size: 120%;
}
.quiz-container .answers .answer span:not([class^="checkmark"]) {
background-color: #727272;
color: white;
display: block;
float: left;
margin-left: -15px;
margin-top: -10px;
margin-right: 20px;
padding: 10px 0;
text-align: center;
text-transform: uppercase;
width: 40px;
}
.quiz-container button {
background-color: #cb2127;
color: #fff;
font-size: 110%;
border: 0;
width: 100%;
position: relative;
}
.quiz-container button:hover {
background-color: #2ecc71;
cursor: pointer;
}
.quiz-container button span {
font-size: 200%;
position: absolute;
top: -3px;
right: 10px;
}
.quiz-container{
width:65%;
margin:0 auto 39px;
}
.tabs .tab.completed_que a{
color:#fff;
background-color:#009933;
}
.tabs .tab.missedque a{
color:#fff;
background-color:#A50303;
}
.questiontabs .tab a.active{
background-color: #fcfcfc;
color: #212121;
border:none !important;
}
.questiontabs .tab{
height: 30px;
line-height: 29px;
}
.questiontabs .tab a{padding:0 10px;color:#212121; border-radius:4px;}
.questiontabs a.active{
border:none !important;
}
.questiontabs{
background:none;
margin-top:-27px;
}
.quiz-container .indicator{
display:none !important;
}
.icon{
border-radius: 2px;
display: inline-block;
height: 10px;
margin-right: 10px;
vertical-align: middle;
width: 10px;
}
.active .icon{
background:#fcfcfc none repeat scroll 0 0;
border:1px solid #ddd;
}
.attempted .icon{
background:#009933 none repeat scroll 0 0;
border-color: #009933;
}
.not-attempted .icon{
background:#A50303 none repeat scroll 0 0;
border-color: #A50303;
}
.test_status li{
display:inline-block;
margin-right:10px;
}
.questiontabs_test{
visibility:hidden;
}
.questiontabs .completed_que.disabled a{
opacity:0.4;
}
.questiontabs .completed_que.disabled a:hover{
cursor:not-allowed;
color:#fff;
}
.questiontabs .completed_que.disabled .active{
background-color:#009933;
color:#fff;
}
.question_images img{
display:inline-block;vertical-align:top;
}
.question_action_form p{
margin:0px;
}
.instructions li{
list-style:inside;
}
.instructions ol li{
list-style-type:decimal;
line-height:35px;
}
.instructions p{
font-size:13px;
margin-bottom:10px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<div class="quiz-container">
<p>Question 1 of 5</p>
<div class="question1 questions" id="questions1">
<div class="question box">
<p><span>1.</span> Which one of the five is least like the other four ?</p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span>Shark</p>
</li>
<li class="answer box">
<p><span>b</span>Deer</p>
</li>
<li class="answer box">
<p><span>c</span> Cow</p>
</li>
<li class="answer box">
<p><span>d</span> Dog</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn red waves-effect" value="Skip" id="next_1">
<input type="submit" class="btn red waves-effect" value="Submit" id="submit_1">
<div class="clearfix"></div>
</div>
</div>
<div class="question2 questions" id="questions2">
<div class="question box">
<p><span>2.</span> Which number should come next in the series ? 1 - 1 - 2 - 3 - 5 - 8 - 13</p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span>8</p>
</li>
<li class="answer box">
<p><span>b</span>21</p>
</li>
<li class="answer box">
<p><span>c</span> 26</p>
</li>
<li class="answer box">
<p><span>d</span> 31</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn black waves-effect" value="Previous" id="back_1">
<input type="submit" class="btn red waves-effect" value="Skip" id="next_2" onClick="next()">
<input type="submit" class="btn red waves-effect" value="Submit" id="submit_2">
<div class="clearfix"></div>
</div>
</div>
<div class="question3 questions unanswered_que" id="questions3">
<div class="question box">
<p><span>3.</span> If you rearrange the letters "ANICH", you would have the name of a/an: </p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span>Country</p>
</li>
<li class="answer box">
<p><span>b</span>Ocean</p>
</li>
<li class="answer box">
<p><span>c</span> State</p>
</li>
<li class="answer box">
<p><span>d</span> City</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
<div class="clearfix"></div>
</div>
</div>
<div class="question4 questions" id="questions4">
<div class="question box">
<p><span>4.</span> I'm a male. If Albert's son is my son's father, what is the relationship between Albert and me? </p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span>he is my brother</p>
</li>
<li class="answer box">
<p><span>b</span>he is my uncle</p>
</li>
<li class="answer box">
<p><span>c</span> he is my father</p>
</li>
<li class="answer box">
<p><span>d</span> he is my sister</p>
</li>
</ul>
</div>
<div class="question5 questions unanswered_que" id="questions5">
<div class="question box">
<p><span>5.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span> A famous scientist </p>
</li>
<li class="answer box">
<p><span>b</span> A pop princess </p>
</li>
<li class="answer box">
<p><span>c</span> A football player</p>
</li>
<li class="answer box">
<p><span>d</span> A baseball player</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
<div class="clearfix"></div>
</div>
</div>
<div class="question6 questions" id="questions6">
<div class="question box">
<p><span>6.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span> A famous scientist </p>
</li>
<li class="answer box">
<p><span>b</span> A pop princess </p>
</li>
<li class="answer box">
<p><span>c</span> A football player</p>
</li>
<li class="answer box">
<p><span>d</span> A baseball player</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
<div class="clearfix"></div>
</div>
</div>
<div class="question7 questions unanswered_que" id="questions7">
<div class="question box">
<p><span>7.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span> A famous scientist </p>
</li>
<li class="answer box">
<p><span>b</span> A pop princess </p>
</li>
<li class="answer box">
<p><span>c</span> A football player</p>
</li>
<li class="answer box">
<p><span>d</span> A baseball player</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
<div class="clearfix"></div>
</div>
</div>
<div class="question8 questions unanswered_que" id="questions8">
<div class="question box">
<p><span>8.</span> Nearby Priests" - If these letters are rearranged, they create the name of which person? </p>
</div>
<ul class="answers">
<li class="answer box">
<p><span>a</span> A famous scientist </p>
</li>
<li class="answer box">
<p><span>b</span> A pop princess </p>
</li>
<li class="answer box">
<p><span>c</span> A football player</p>
</li>
<li class="answer box">
<p><span>d</span> A baseball player</p>
</li>
</ul>
<div class="aligncenter control_sec pull-right">
<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next()">
<div class="clearfix"></div>
</div>
</div>
<div class="row MT20">
<div class="col s12">
<ul class="tabs questiontabs">
<li class="tab completed_que disabled"><a href="#questions1">1</a></li>
<li class="tab completed_que disabled"><a href="#questions2">2</a></li>
<li class="tab missedque"><a class="active" href="#questions3">3</a></li>
<li class="tab completed_que disabled"><a href="#questions4">4</a></li>
<li class="tab missedque"><a href="#questions5">5</a></li>
<li class="tab completed_que disabled"><a href="#questions6">6</a></li>
<li class="tab missedque"><a href="#questions7">7</a></li>
<li class="tab missedque"><a href="#questions8">8</a></li>
</ul>
</div>
</div>
<div class="aligncenter test_status">
<ul>
<li class="active"><span class="icon"></span>Active Question</li>
<li class="attempted"><span class="icon"></span>Attempted</li>
<li class="not-attempted"><span class="icon"></span>Not attempted</li>
</ul>
</div>
</div>
答案 0 :(得分：1)
在您的HTML传递this中作为参数i next()函数..就像这样..
<input type="submit" class="btn red waves-effect" value="Next" id="next_4" onClick="next(this)">
然后使用此代码..这应该有用。
function next(_this){
var _el = $(_this).parents('div.active');
var _id = $(_this).attr('id');
$(_el).removeClass('active');
$(_el).css('display','none');
$(_el).closest('div').nextAll('.unanswered_que').eq(0).css('display','block').addClass('active');
$('li.tab').removeClass('active');
$('[href="#' + _id + '"]').addClass('active');
}
注意：您仍然需要根据您的要求进一步操作