Question

如果第一个选项卡的问题已填写且单击了下一个按钮，我想切换到第二个选项卡。

function submit() { document.getElementById("tab2").style.display = "block"; }

<button class="btn btn-primary" onclick="submit();"><i class="fas fa-angle-double-right"></i> Next</button>





           <section class="tab2" id="tab2">
                <div class="row col-lg-12">
                    <div class="col-lg-3">
                        <p>5. A variable that is not assigned any value is given what primitive type in Javascript</p>
                        <input type="checkbox" value="script" required>Null<br>
                        <input type="checkbox" value="sript" required>Undefined<br>
                        <input type="checkbox" value="sript" required>Boolean<br>
                        <input type="checkbox" value="sript" required> String
                    </div>

            </section>

Answer 1

我认为您正在使用quiz之类的结构。尝试这样

var tab = 1;
function next(){
  tab++;
  $('.tab').css('display','none');
  $('#tab'+tab).css('display', 'block');
}

function prev(){
  tab--;
  $('.tab').css('display','none');
  $('#tab'+tab).css('display', 'block');
}

function start(){
  $('.start').css('display','none');
  $('.next').css('display', 'block');
  $('.prev').css('display', 'block');
  $('.tab').css('display','none');
  $('#tab'+tab).css('display', 'block');
}

.tab, .next, .prev{
  display : none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn btn-primary start" onclick="start();"><i class="fas fa-angle-double-right"></i> Start</button>

<button class="btn btn-primary next" onclick="next();"><i class="fas fa-angle-double-right"></i> Next</button>

<button class="btn btn-primary prev" onclick="prev();"><i class="fas fa-angle-double-right"></i> Previous</button>

<section class="tab" id="tab1">
  here is tab 1 content
</section>
<section class="tab" id="tab2">
    <div class="row col-lg-12">
        <div class="col-lg-3">
            <p>5. A variable that is not assigned any value is given what primitive type in Javascript</p>
            <input type="checkbox" value="script" required>Null<br>
            <input type="checkbox" value="sript" required>Undefined<br>
            <input type="checkbox" value="sript" required>Boolean<br>
            <input type="checkbox" value="sript" required> String
        </div>
      </div>
</section>

<section class="tab" id="tab3">
  here is tab 3 content
</section>

<section class="tab" id="tab4">
  here is tab 4 content
</section>

使用onclick使用javascript显示新标签

1 个答案: