jQuery Data Handling

by anandhinava

HTML

<ul class="tabs">
    <li>
        <a href="#" class="tab current" data-pane="#one">One</a>
    </li>
    <li>
        <a href="#" class="tab" data-pane="#two">Two</a>
    </li>
    <li>
        <a href="#" class="tab" data-pane="#three">Three</a>
    </li>
</ul>
<div id="panes">
    <div id="one" class="pane current">

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
        <p>Aenean lacinia bibendum nulla sed consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
    </div>
    <div id="two" class="pane">

        <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Maecenas sed diam eget risus varius blandit sit amet non magna. Curabitur blandit tempus porttitor. Donec ullamcorper nulla non metus auctor fringilla.</p>

        <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper.</p>
    </div>
    <div id="three" class="pane">

        <p>Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac...

CSS

div.pane {
    display: none;
}
div.current {
    display: block;
}
#panes {
    border-top: 1px solid #ccc;
    clear: both;
}
.tabs {
    margin: 0;
    padding: 0;
    list-style: none;
    clear: both;
}
.tabs li {
    display: inline;
}
.tabs li a {
    color: black;
    float: left;
    display: block;
    padding: 4px 10px;
    margin-left: -1px;
    position: relative;
    left: 1px;
    text-decoration: none;
    background: #ddd;
    color: #fff;
    border: 1px solid #ccc;
    border-bottom-width: 0;
}
.tabs li a.current {
    background: #fff;
    color: #000;
    font-weight: bold;
}
.tabs li a:hover {
    background: #ccc;
}

JavaScript

$(function () {

    var $tabs = $('a.tab');
    var $panes = $('div.pane');
    
    console.log('tab', $tabs);
    console.log('pane', $panes);
    
    $tabs.each(function() {
        
        var $tab = $(this);
        var pane = $tab.data('pane');
        
        console.log("read pane id %s", pane);
        
        $tab.data('pane', $(pane));
        
    });
    
    console.log('cache', $.cache);
    
    $tabs.click(function(e) {
        
        e.preventDefault();
        
        $tabs.removeClass('current');
        $panes.removeClass('current');
        
        var $tab = $(this);
        var $pane = $tab.data('pane');
        
        console.log('tab/pane', $tab, $pane);
        
        $tab.addClass('current');
        $pane.addClass('current');
        
    });

});