Jump to content
Goodness

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

Share this post


Link to post
Share on other sites

Then just add ' w3-red' to first tab AND add style="display: block;" to first content element then, simpiles.

Edited by dsonesuk

Share this post


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>

Share this post


Link to post
Share on other sites

If the tab content shows as red, then that would be a big 'NO', now what uses 'w3-red' to show as active and becomes red.

 

Remove openTab("tab1"), it does not have all required parameters to function properly.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

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

Share this post


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> 

Share this post


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