3 Bootstrap Component - Navs

This demo is an extraction from http://getbootstrap.com/css/. created by @juanmendezinfo

by Yolanda Robles

HTML

<link rel="stylesheet" href="http://getbootstrap.com/assets/css/docs.css">
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<!--0-->
<h3>0. Basic tab</h3>
<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#">Website</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Tweets</a></li>
</ul>

<!--1-->
<h3>1. Nav Pills</h3>
<ul class="nav nav-pills">
    <li class="active"><a href="#">Website</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Tweets</a></li>
</ul>

<!--2-->
<h3>2. Nav Tabs or Pills justified links</h3>
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">Inicio</a></li>
    <li><a href="#">Perfil</a></li>
    <li><a href="#">Tweets</a></li>
</ul>

<!--3-->
<h3>3. Nav Tabs with dropdowns</h3>
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Website</a></li>
    <li><a href="#">Help</a></li>
    <li class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">
            Dropdown <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">check my profile</a></li>
            <li class="divider"></li>
            <li>
                <!--this link works-->
                <a href="#">Separated link</a></li>
        </ul>
    </li>
</ul>

<!--4-->
<!--open last dropdown via javascript-->
<h3>4. Open Dropdown via JS</h3>

<button id="toggle_button" class="btn btn-default">toggle dropdown</button>

<!--5-->
<!--As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.-->
<h3>5. stackable</h3>

<ul class="nav nav-tabs  nav-stacked">
    <li class="active"><a href="#">Website</a></li>
    <li><a href="#">Help</a></li>
    <li><a...

JavaScript

/*enable tabs to be selected*/
$('.nav a').click(function (e) {
    // e.preventDefault();
    $(this).tab('show');
})

/*4*/
$("#toggle_button").click( function(e){
    $d = $($(".dropdown-toggle" )[0]);
    
    //A programmatic api for toggling menus for a given navbar or tabbed navigation.
    $d.dropdown('toggle');
    
    return false;
});

/*6 select dynamically one tab by using a dropdown menu
    * @see http://getbootstrap.com/javascript/#tabs
    * */
$("#myTab .dropdown-menu a").click( function(e){
    
    var source = $(this).data("source");
    
    if( source )
    {
        $('#myTab a[href="#' + source + '"]').tab('show');
    }
    
    return false;
});

/*9 setting up the position of the nav container */
$("#nav_position a").click( function(e){
    
    var position = $(this).data("position");
    var $nav = $("#nav_position");
    var $body = $("body");
    
    
    $nav.removeClass( "navbar-fixed-bottom");
    $nav.removeClass( "navbar-fixed-top");
    
    //Body padding required
    $body.css( "padding-top", "0" );
    $body.css( "padding-bottom", "0" );
    
    switch( position )
    {
        case "normal":
            console.log( "normal nav position is already applied.. :)");
            break;
        case "top":
            $body.css( "padding-top", $nav.height() );
            $nav.addClass( "navbar-fixed-top");
            break;
        case "bottom":
            $body.css( "padding-bottom", $nav.height() );
            $nav.addClass( "navbar-fixed-bottom");
            break;
    }
    
    return false;
});

/*
     10. listen for scroll events using scrollspy navigation
     @see http://getbootstrap.com/javascript/#scrollspy
     */
$('#myScrollspy').on('activate.bs.scrollspy', function (e) {
    
    var $target = $(e.target);
    var link;
    
    if( $target.hasClass('dropdown'))
    {
        link = $target.find("li.active a");
    }
    else
    {
        link = $target.find("a");
    }
    
    $disabled_link =  $(...