Nice code structure

by HoffZ

HTML

<div class="tabs">
    <ul>
        <li class="active"><a href="#tab1" class="tab-link">Tab 1</a>

        </li>
        <li><a href="#tab2" class="tab-link">Tab 2</a>

        </li>
        <li><a href="#tab3" class="tab-link">Tab 3</a>

        </li>
    </ul>
    <div id="tab1">
         <h3>Tab 1</h3>

        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div id="tab2">
         <h3>Tab 2</h3>

        <p>Lorem ipsum dolor sit amet</p>
    </div>
    <div id="tab3">
         <h3>Tab 3</h3>

        <p>Lorem ipsum dolor sit amet</p>
    </div>

CSS

.tabs {
    width: 600px;
    border: 1px solid #111;
}
.tabs ul {
    margin-bottom: 1px solid #111;
    padding: 0;
    margin: 0;
}
.tabs li {
    display: inline-block;
    width: 30%;
    padding: 5px;
    text-align: center;
}
.tabs li.active {
    background: #ddd;
}
.tabs div {
    padding: 5px;
    background: #ddd;
}
#tab2, #tab3 {
    display: none;
}

JavaScript

// From http://javascriptplayground.com/blog/2013/06/refactoring-part-2/

var Tabularize = function (elem) {
    this.tabsWrapper = $(elem);
    this.tabs = this.tabsWrapper.children("div");
    this.tabLinks = this.tabsWrapper.find(".tab-link");
    this.checkHash();
    this.bind();
};

Tabularize.prototype = {
    bind: function () {
        var self = this;
        this.tabLinks.on("click", function (e) {
            e.preventDefault();
            self.transition($(this).attr("href"));
        });
    },
    checkHash: function () {
        var active = location.hash;
        if (active) {
            this.transition(active);
        }
    },
    transition: function (hash) {
        this._activateTab(hash);
        var link = tabLinks.filter("[href='" + hash + "']").closest("li");
        this._activateLink(link);
    },
    _activateLink: function (elem) {
        tabWrapper.find(".active").removeClass("active");
        elem.addClass("active");
    },
    _activateTab: function (hash) {
        this.tabs.hide();
        $(hash).show();
    }
}

var tab = new Tabularize('.tabs');

// To make this a jQuery plugin
/*
$.fn.tabularize = function () {
    return this.each(function () {
        new Tabularize(this);
    });
}

// Use plugin
$('.tabs').tabularize();
*/