Question

我目前正在开展技能测试项目，该项目在每个标签上显示一个问题。如何设置默认的活动选项卡？我有默认打开选项卡的代码，我刚从w3schools.com复制，但它不会工作。我不知道为什么。我希望有人可以帮我修改我的代码，因为我是新手。非常感谢你！

风格：

.button {
    display: inline-block;
    margin: 4px 2px;
    border-radius: 8px;
}

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;
}

体：

<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" 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>        

        <?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>
                        </tr>
                    </tbody>
                    </table>
                    <br>  
                </div>
            <?php $num++; ?>
        <?php endif ?>
       </form>
    </div>
    </div>
</div>

Answer 1

我刚刚将悬停的颜色更改为绿色并激活为红色。如果你指的是让第一个按钮处于活动状态，只需修改为：

<button class="tablinks active" type="button" onclick="openTab(event, 'q1')" id="defaultOpen"></button>

我们在课堂上添加了“active”。并将您的正文标记修改为：

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

我们在做什么？
我们最初将默认按钮设为活动状态为了确保它的内容也被加载，当我们加载正文时调用默认按钮的onClick以显示其内容。

.button {
  display: inline-block;
  margin: 4px 2px;
  border-radius: 8px;
}

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: green;
}

div.tab button.active {
  background-color: red;
}

.tabcontent {
  display: none;
  border: 1px solid #ccc;
  border-top: none;
}

<body onload="document.getElementById('defaultOpen').click();">
<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>

      <?php if (mysqli_num_rows($result) > 0): ?>
      <?php $index = 0; $num=0; ?>
      <div id="q1" class="tabcontent">
        <table class="table table-hover">
          <tbody>
            <tr class="form-group">
              <h3 name="ques1" 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="ans1" value="1">Option1
                            </label>
              <br>
              <label class="radio-inline" style="text-indent: 70px; font-size: 18px;">
                                 &nbsp;&nbsp;<input style="font-size: 18px;" type="radio" name="ans2" value="2">Option 2 
                            </label>
              <br>
              <label class="radio-inline" style="text-indent: 70px; font-size: 18px;">
                                 &nbsp;&nbsp;<input style="font-size: 18px;" type="radio" name="ans3" value="3">Option 3
                            </label>
              <br>
            </tr>
          </tbody>
        </table>
        <br>
      </div>
      <?php $num++; ?>
      <?php endforeach ?>
      <?php endif ?>
      </form>
    </div>
  </div>
</div>

如何在html中设置默认的活动/打开选项卡

1 个答案: