SO - 16353427

by Arun P Johny

HTML

<div id="vtab">
    <ul>
        <li class="basics selected"><a href="#">Basics</a>
        </li>
        <li class="advanced"><a href="#">Advanced</a>
        </li>
        <li class="combos"><a href="#">Combos</a>
        </li>
    </ul>
    <div>
         <h3>Welcome Home!</h3>

         <h3>Welcome Home!</h3>

         <h3>Welcome Home!</h3>

         <h3>Welcome Home!</h3>

    </div>
    <div>
         <h3>Secure Login</h3>

         <h3>Secure Login</h3>

         <h3>Secure Login</h3>

         <h3>Secure Login</h3>

    </div>
    <div>
         <h3>Online Support</h3>

         <h3>Online Support</h3>

         <h3>Online Support</h3>

         <h3>Online Support</h3>

    </div>
</div>

CSS

#vtab > ul > li {
    width: 25%;
    background-color: #fff !important;
    list-style-type: none;
    display: block;
    text-align: center;
    border: 1px solid #000;
    position: relative;
    opacity: .3;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
    float:left;
    border-radius:10px 10px 0 0;
    padding:5px;
    border-bottom:none;
    margin:2px 8px 10px;
}
#vtab > ul > li > a {
    text-decoration:none;
    text-shadow:#333333 0 -1px 0;
    color:#FFF;
    font-size:30px;
    font-weight:bold;
}
#vtab > ul > li.basics {
    background: #4f914e;
    /* Old browsers */
    background: -moz-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #4f914e), color-stop(30%, #63aa63), color-stop(70%, #63aa63), color-stop(100%, #4f914e));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
    /* IE10+ */
    background: linear-gradient(to right, #4f914e 0%, #63aa63 30%, #63aa63 70%, #4f914e 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f914e', endColorstr='#4f914e', GradientType=1);
    /* IE6-9 */
}
#vtab > ul > li.advanced {
    background: #dd412c;
    /* Old browsers */
    background: -moz-linear-gradient(left, #dd412c 0%, #f2552e 30%, #f2552e 70%, #dd412c 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #dd412c), color-stop(30%, #f2552e), color-stop(70%, #f2552e), color-stop(100%, #dd412c));
    /* Chrome,Safari4+ */
    background:...

JavaScript

var $items = $('#vtab>ul>li');

$items.click(function () {
    $items.removeClass('selected');
    $(this).addClass('selected');

    var index = $items.index($(this));
    $('#vtab>div').hide().eq(index).show();
}).eq(0).click();