HTML TABS: Make the first TAB automatically selected

Question

HTML TABS: Make the first TAB automatically selected

I've been experimenting with tabbing in HTML using a tutorial I found on W3SCHOOLS.

While the source code provided works fine, I'm encountering an issue with automatically selecting the first tab by default. The tutorial doesn't cover this, so I'm looking for a solution to have the first tab be automatically selected and displayed when the page loads.

<!DOCTYPE html>
<html>
<style>
body {font-family: "Lato", sans-serif;}
...

<p>I've tried adding the following line inside the JavaScript for loop but it didn't work:</p>

<pre><code>tablinks[0].className += " active";

javascript css html

Answer 1

Answer №1

In the first LI tag, include class=active, and in the subsequent one, update the div with the following:

div id=London class=tabcontent style=display:block

To see a working example, check out this JSfiddle

Answer 2

In the first LI tag, include class=active, and in the subsequent one, update the div with the following:

div id=London class=tabcontent style=display:block

To see a working example, check out this JSfiddle

Answer 3

Answer №2

If you prefer using only javascript, you can achieve this by including the following code in your script:

document.getElementsByClassName('tablinks')[0].click()

This code will simulate a click event on the first tab when the page is loaded.

Answer 4

If you prefer using only javascript, you can achieve this by including the following code in your script:

document.getElementsByClassName('tablinks')[0].click()

This code will simulate a click event on the first tab when the page is loaded.

Answer 5

Answer №3

<!DOCTYPE html>
<html>
<style>
body {font-family: "Lato", sans-serif;}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>
<body>

<h3>Fade in Tabs</h3>

<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="TabContent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
document.getElementsByClassName('tablinks')[0].click()
function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

</body>
</html>

included

document.getElementsByClassName('tablinks')[0].click()

within the script

Answer 6

<!DOCTYPE html>
<html>
<style>
body {font-family: "Lato", sans-serif;}

ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
</style>
<body>

<h3>Fade in Tabs</h3>

<ul class="tab">
  <li><a href="#" class="tablinks" onclick="openCity(event, 'London')">London</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Paris')">Paris</a></li>
  <li><a href="#" class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</a></li>
</ul>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p>
</div>

<div id="Tokyo" class="TabContent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

<script>
document.getElementsByClassName('tablinks')[0].click()
function openCity(evt, cityName) {
    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(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
</script>

</body>
</html>

included

document.getElementsByClassName('tablinks')[0].click()

within the script

Answer 7

Answer №4

Include the following CSS code:

div[class*="tabcontent"]:first-of-type {
    display: block;
}

Make sure to update the HTML markup like this:

<a href="#" class="tablinks active" onclick="openCity(event, 'London')">London</a>

Check out the demonstration here.

Alternatively, you can add an active class for the content elements as well:

/* Make the selector more specific to target content elements */
ul.tab li a:focus, ul.tab li a.active {
    background-color: #ccc;
}

/* Add this to your stylesheet */
.tabcontent.active {
    display: block;
}

/* Update the HTML markup by adding the class */
<div id="London" class="tabcontent active">

Answer 8

Include the following CSS code:

div[class*="tabcontent"]:first-of-type {
    display: block;
}

Make sure to update the HTML markup like this:

<a href="#" class="tablinks active" onclick="openCity(event, 'London')">London</a>

Check out the demonstration here.

Alternatively, you can add an active class for the content elements as well:

/* Make the selector more specific to target content elements */
ul.tab li a:focus, ul.tab li a.active {
    background-color: #ccc;
}

/* Add this to your stylesheet */
.tabcontent.active {
    display: block;
}

/* Update the HTML markup by adding the class */
<div id="London" class="tabcontent active">

HTML TABS: Make the first TAB automatically selected

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Modifying JavaScript object values using the Object() constructor

Adjust the CSS to give <a> elements the appearance of plain text

Modify the background color of a pseudo-element's property value dynamically

Change the content of an ion-card in Ionic2 dynamically

Designing a layout with one box on top and two beneath it, covering the entire page, can be achieved by following these steps

What are the steps for encoding a value using jquery serialize?

Check the feature that retrieves data from a `json` file

Setting a callback function as a prop for react-paginate in TypeScript: A step-by-step guide

Pagination with React Material UI is a user-friendly and visually

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

I'm curious as to why IPC messages from one menu item in Electron can successfully reach my window, but when sent from a different menu item, they do not seem to

Press the div, excluding the button - Vue

Filter array to only include the most recent items with unique names (javascript)

Employing VUE.js for content retrieval

The menu seems to be off-center

Vue.js Class-based Decorator not Transmitting Event from Child to Parent Component

Utilize Vue.js 3 and InertiaJs to Retrieve Session Information in Laravel 9

Troubleshooting Problem with Retrieving Files Using jQuery Ajax

Charting data with missing values in Google Charts

What is the process for enabling SASS line numbers using Yeoman's Grunt.js file?