Tabs 2.0

by JamesKyle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.2.1/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.3/jquery.scrollTo.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history.js/1.7.1/bundled/html4+html5/jquery.history.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

<h1>Tabs, scrollTo, and History API.. oh my!</h1>

<hr class="light">

<nav data-tab="hash">
  <ul class="tabs">
    <li><a href="#tab-1">Tab One</a></li>
    <li><a href="#tab-2">Tab Two</a></li>
    <li><a href="#tab-3">Tab Three</a></li>
    <li><a href="#tab-4">Tab Four</a></li>
  </ul>
</nav>
<hr>
<article class="tab-container">
  <section class="tab" id="tab-1">
    <h1>Tab One Content</h1>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Donec sed odio dui.</p>
    <h5>Tortor Mollis Lorem Malesuada</h5>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas faucibus mollis interdum. Etiam porta sem malesuada magna mollis euismod. Nullam quis risus eget urna mollis ornare vel eu leo. Maecenas faucibus mollis interdum.</p>
    
    <p>Donec sed odio dui. Maecenas faucibus mollis interdum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod.</p>
    
    <hr class="light">
    
    <h2>Vulputate Commodo Lorem Magna Mattis</h2>

    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor....

CSS

* {
  box-sizing: border-box;
}
html {
  font-size: 87.5%;
  min-width: 320px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
h1,
h2,
h3,
h4,
h5,
h6,
article,
p {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

body {  
  font: 400 1em/1.5 "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #fff;
  color: #262626;
  margin: 1.5em;
}

body::before,
body::after {
    content: '';
    display: block;
    height: 2.5em;
}
body::before {
    position: relative;
    margin: -3.5em -1.5em 1.5em;
    background: #36c;
    z-index: 999;
}

body::after {
    position: fixed;
    width: 100%;
    top: -2.5em; left: 0; right: 0;
    box-shadow: 0 .25em .25em rgba(0, 0, 0, .1);
}

hr {
  height: 0;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0.875em 0;
  border-top: 0.25em solid;
}
hr.light {
  border-color: #d9d9d9;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 1em;
  line-height: 1;
  font-weight: 700;
  margin: 0;
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}
h1 + h1,
h2 + h1,
h3 + h1,
h4 + h1,
h5 + h1,
h6 + h1,
h1 + h2,
h2 + h2,
h3 + h2,
h4 + h2,
h5 + h2,
h6 + h2,
h1 + h3,
h2 + h3,
h3 + h3,
h4 + h3,
h5 + h3,
h6 + h3,
h1 + h4,
h2 + h4,
h3 + h4,
h4 + h4,
h5 + h4,
h6 + h4,
h1 + h5,
h2 + h5,
h3 + h5,
h4 + h5,
h5 + h5,
h6 + h5,
h1 + h6,
h2 + h6,
h3 + h6,
h4 + h6,
h5 + h6,
h6 + h6 {
  margin-top: 0;
}
h1 {
  font-size: 2.5em;
  margin-top: 0.2em;
  line-height: 1.2;
}
h2 {
  font-size: 2.25em;
  margin-top: 0.22222em;
  line-height: 1.11111;
}
h3 {
  font-size: 2em;
  margin-top: 0.25em;
  line-height: 1.25;
}
h4 {
  font-size: 1.75em;
  margin-top: 0.28571em;
  line-height: 1.14286;
}
h5 {
  font-size: 1.5em;
  margin-top: 0.33333em;
  line-height: 1.33333;
}
h6 {
  font-size: 1.25em;
  margin-top: 0.4em;
  line-height: 1.2;
}
a:link,
a:visited {
  color: #36c;
 ...

JavaScript

$(function() {
    
    $('[data-tab]').each(function() {
        
        var $this = $(this),
            links = $this.find('a'),
            location = window.location.hash;
        
        links.click(function (e) {
            
            $(this).tab('show');
            
            e.preventDefault();
            $(window).scrollTo(
                $('[data-tab]'), 200, {axis:'y', margin: true}
            );
        });
        
        if (location !== "" && $this.data('tab') === "hash") {
            
            links.each(function() {
                var $this = $(this);
                if ($this.attr('href') === location) {
                    $this.parent('li').addClass('active');
                }
            });
                
            $(location).addClass('active');
            
        } else {
            
            var hash = links.first().parent('li').addClass('active').end().attr('href');
            $(hash).addClass('active');
            
        }
        
    });
    
});