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

Eliminating unused CSS space on a website

Styling a numerical value to appear as currency with CSS

Tips for including or excluding a series of comma-delimited values from an input

Next JS throwing internal server error when authenticating with axios

Electron triggers MouseLeave event on child elements

How can you alternate a button's text using jQuery?

What is the best way to manage a batch of files in a response from an Ajax POST request?

css side by side with immovable element

Adjusting font size according to the font style selected

The concept of undefined functions and the use of dependency injection may not always align

Error TS2307: Module './tables.module.css' or its type declarations could not be located

Issue with Webpack in vue.js project when incorporating sasssass causing errors

Saving an image in Flask and securely storing it in a local directory

Trouble with Fetch in JS and PHP not sending parameters

Focus issue with MUI Custom Text Field when state changes

What is the reason why modifying a nested array within an object does not cause the child component to re-render?

Using underscore.js to connect an object with $rootscope: a step-by-step guide

When render returns another component, React does not invoke componentWillMount

HTML block failing to implement Bootstrap styling

Obtain the leaf nodes from a combination of arrays and objects using Lodash