导航菜单html

<div id="dashboard" class="tab tabNoSelected"> <!-- Dashboard -->
    <h3><span class="entypo-gauge"></span>Dashboard</h3>
    <a href="#1" class="notification">1</a>
</div>
<div id="dashboardBody" class="tabBody">
    <ul class="tabBodyOptions">
        <li><a href="#10"><span class="entypo-phone"></span> Calls</a></li>
        <li><a href="#11"><span class="entypo-chart-line"></span>Chart</a></li>
        <li><a href="#12"><span class="entypo-map"></span>Map</a></li>
    </ul>                
</div>

点击展开和收缩

$(document).ready(function() {

    $("#messagesBody").slideToggle("fast"); // The Body of "Messages" is already opened in the design sample.

    $("#dashboard").click(function() {
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#dashboardBody").slideToggle("fast");
    });
    $("#profile").click(function() {
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#profileBody").slideToggle("fast");
    });
    $("#messages").click(function() {
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#messagesBody").slideToggle("fast");
    });
    $("#settings").click(function() {
        $(".tab").removeClass("tabSelected");
        $(".tab").addClass("tabNoSelected");
        $(this).removeClass("tabNoSelected");
        $(this).addClass("tabSelected");
        $(".tabBody").slideUp("fast");
        $("#settingsBody").slideToggle("fast");
    });
});