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

admin管理员组

文章数量:1327805

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>

• javascript
• php
• html
• css

Share Improve this question Follow edited Sep 20, 2021 at 5:26 Dizza asked Dec 12, 2017 at 11:32 DizzaDizza 5311 gold badge22 silver badges99 bronze badges 2

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

本文标签： javascriptHow to set a default activeopen tab in htmlStack Overflow