Jump to content

Make Tab Active (open) When Page Loads

Goodness

By Goodness
in CSS

 Share

Recommended Posts

Goodness Newbie

Goodness

Posted
Posted (edited)

I'm using W3.CSS tabs and I have a class assigned so that the active tab is colored.

However, when the page loads none of the tabs are open. I have to click on one.

I'm wanting the 1st tab to be open and highlighted with the active color when the page is first loaded.

 

Here's my code: 

 <ul class="w3-navbar w3-grey">
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li>
      </ul>

      <div id="tab1" class="tab">
       <p>Tab 1 content</p>
      </div>
      
      <div id="tab2" class="tab">
      <p>Tab 2 content</p>
      </div>
      
      <div id="tab3" class="tab">
      <p>Tab 3 content</p>
      </div>

      <script>
      openTab("tab1")
      function openTab(evt, tabName) {
        var i, x, tablinks;
        var x = document.getElementsByClassName("tab");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < x.length; i++){
            tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " w3-red";
    }
    </script>

Thanks!

Edited by Goodness
Link to comment
Share on other sites
Goodness Newbie

Goodness

Posted
  • Author
Posted

Like this?

<ul class="w3-navbar w3-grey">
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li>
      </ul>

      <div id="tab1" class="tab w3-red" style="display:block;">
       <p>Tab 1 content</p>
      </div>
      
      <div id="tab2" class="tab">
      <p>Tab 2 content</p>
      </div>
      
      <div id="tab3" class="tab">
      <p>Tab 3 content</p>
      </div>

      <script>
      openTab("tab1")
      function openTab(evt, tabName) {
        var i, x, tablinks;
        var x = document.getElementsByClassName("tab");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < x.length; i++){
            tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " w3-red";
    }
    </script>
Link to comment
Share on other sites
Goodness Newbie

Goodness

Posted
  • Author
Posted (edited)

I removed the openTab("tab1") and added the w3-red as follows:

 

<li><a href="javascript:void(0)" class="tablink w3-red" onclick="openTab(event, 'tab1');">TAB 1</a></li>

 

and that causes the 1st tab to be open.

 

Thanks!

Edited by Goodness
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<style>

.tab {display: none;}

</style>
</head>
<body>

<ul class="w3-navbar w3-grey">
        <li><a href="javascript:void(0)" class="tablink w3-red" onclick="openTab(event, 'tab1');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li>
      </ul>

      <div id="tab1" class="tab" style="display:block;">
       <p>Tab 1 content</p>
      </div>
      
      <div id="tab2" class="tab">
      <p>Tab 2 content</p>
      </div>
      
      <div id="tab3" class="tab">
      <p>Tab 3 content</p>
      </div>

      <script>
     
      function openTab(evt, tabName) {
        var i, x, tablinks;
        var x = document.getElementsByClassName("tab");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < x.length; i++){
            tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " w3-red";
    }
    </script>

</body>
</html>

OR

<!DOCTYPE html>
<html>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

</head>
<body>

<ul class="w3-navbar w3-grey">
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab1');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab2');">TAB 1</a></li>
        <li><a href="javascript:void(0)" class="tablink" onclick="openTab(event, 'tab3');">TAB 3</a></li>
      </ul>

      <div id="tab1" class="tab">
       <p>Tab 1 content</p>
      </div>
      
      <div id="tab2" class="tab">
      <p>Tab 2 content</p>
      </div>
      
      <div id="tab3" class="tab">
      <p>Tab 3 content</p>
      </div>

      <script>
     document.getElementsByClassName("tablink")[0].click().openTab(event, 'tab1')
      function openTab(evt, tabName) {
        var i, x, tablinks;
        var x = document.getElementsByClassName("tab");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablink");
        for (i = 0; i < x.length; i++){
            tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
        }
        document.getElementById(tabName).style.display = "block";
        evt.currentTarget.className += " w3-red";
    }
    </script>

</body>
</html>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...