Skip to content

Instantly share code, notes, and snippets.

@Jiert

Jiert/JavaScript-Tabs.js

Last active November 29, 2023 11:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Jiert/bbddb482c28f6c79cccc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Jiert/bbddb482c28f6c79cccc to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Jiert renamed this gist Jan 7, 2015. 1 changed file with 0 additions and 0 deletions.
    0 JavaScript Tabs → JavaScript-Tabs.js
    View file
    File renamed without changes.
  2. Jiert revised this gist Jan 6, 2015. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions JavaScript Tabs
    View file
    Original file line number Diff line number Diff line change
    @@ -2,14 +2,13 @@
    <html lang="en">
    <head>
    <title>Tabs</title>

    <style>
    .nav .active a { color: red; }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }
    </style>

    </head>

    <body>

    <div>
  3. Jiert renamed this gist Dec 11, 2014. 1 changed file with 0 additions and 0 deletions.
    0 index.html → JavaScript Tabs
    View file
    File renamed without changes.
  4. Jiert created this gist Nov 19, 2014.
    57 changes: 57 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,57 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Tabs</title>

    <style>
    .nav .active a { color: red; }
    .tab-pane { display: none; }
    .tab-pane.active { display: block; }
    </style>

    </head>
    <body>

    <div>
    <!-- Tabs -->
    <ul id="nav-tab" class="nav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
    <div class="tab-pane active" id="home">Home Panel</div>
    <div class="tab-pane" id="profile">Profile Panel</div>
    <div class="tab-pane" id="messages">Messages Panel</div>
    <div class="tab-pane" id="settings">Settings Panel</div>
    </div>
    </div>

    <footer>
    <script type="text/javascript">
    (function(){
    function onTabClick(event){
    var actives = document.querySelectorAll('.active');

    // deactivate existing active tab and panel
    for (var i=0; i < actives.length; i++){
    actives[i].className = actives[i].className.replace('active', '');
    }

    // activate new tab and panel
    event.target.parentElement.className += ' active';
    document.getElementById(event.target.href.split('#')[1]).className += ' active';
    }

    var el = document.getElementById('nav-tab');

    el.addEventListener('click', onTabClick, false);
    })();
    </script>
    </footer>

    </body>
    </html>