Show and hide content with jquery

by Dan Mathisen

HTML

<ul>
    <li><a href="#" class="one">Link 1</a></li>
    <li><a href="#" class="two">Link 2</a></li>
    <li><a href="#" class="three">Link 3</a></li>
    <li><a href="#" class="four">Link 4</a></li>
</ul>

<div class="content">
    <div class="one">Content 1</div>
    <div class="two">Content 2</div>
    <div class="three">Content 3</div>
    <div class="four">Content 4</div>
</div>

CSS

li {
    float: left;
    margin: 0 -1px 20px 0;
}
li a {
    padding: 3px 10px;
    color: #fff;
    background-color: #999;
    border: 1px solid #666;
    text-decoration: none;
}

.content {
    clear: left;
    padding: 10px;
    border: 1px solid #DDD;
}
.content > div {
    display: none;
}

JavaScript

$('a').on('click', function() {
    var section = $(this).attr('class');
    
    $('.content > div').hide();
    $('.content .' + section).show();
});