How to set a default active/open tab in html

I’m currently working on a Skill Test project that displays one question on each tab. How can I set the default active tab? I have code for default open tab which I just copied form w3schools.com, but it wont work. I don’t have an idea why. I hope someone can help me fix my code since Im new to these. Thank you so much!

Style:

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

Body:

<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

I’ve just changed the color of hover to green and active to red. If you’re referring to make the first button active just modify to this:

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

We added “active” in the class. And modify your body tag to :

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

What are we doing?
We’re making the default button active initially and to make sure its content is also loaded, when body is loaded we’re invoking the onClick of the default button to show its content.

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

Advertisement

Answer