javascript - How to set a default activeopen 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, 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>

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

Share Improve this question edited Sep 20, 2021 at 5:26 asked Dec 12, 2017 at 11:32 Dizza 531 gold badge2 silver badges9 bronze badges

4 I don't know PHP, but you have an endforeach with no foreach. – Palle Due Commented Dec 12, 2017 at 11:35
Oh, I didnt included some parts of my codes since I dont see them important or related to my question.. – Dizza Commented Dec 12, 2017 at 13:43

Add a ment |

1 Answer 1

Sorted by: Reset to default 4

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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to set a default activeopen tab in html - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)