CodeTells: Simple navigation tab in jQuery.



    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tab 1</a>
            </li>
            <li><a href="#tabs-2">Tab 2</a>
            </li>
            <li><a href="#tabs-3">Tab 3</a>
            </li>
        </ul>
        <div id="tabs-1">
            <p>Content for Tab 1</p>
        </div>
        <div id="tabs-2">
            <p>Content for Tab 2</p>
        </div>
        <div id="tabs-3">
            <p>Content for Tab 3</p>
        </div>
    </div>
    <div id="tabid"></div>



<style>
    body {
        background-color: #eef;
    }
    #tabs {
        width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
    }
/* Note that jQuery UI CSS is loaded from Google's CDN in the "Add Resources" pane to the left. Normally this would be done in your <head> */
</style>



<script>
    jQuery("#tabs").tabs({
        activate: function (event, ui) {
            var active = jQuery('#tabs').tabs('option', 'active');
            jQuery("#tabid").html('the tab id is ' + jQuery("#tabs ul>li a").eq(active).attr("href"));
        }
    });
</script>

Friday, March 6

Simple navigation tab in jQuery.

No comments:

Post a Comment