Jump to content

Make Tab Active (open) When Page Loads


Recommended Posts

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 post
Share on other sites

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 post
Share on other sites
<!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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...