CanJS - Other Examples - Twitter Bootstrap tabs with canjs Control and Routing


<!doctype html>
<html lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <div class="container">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#profile">Profile</a></li>
        <li><a href="#messages">Messages</a></li>
        <li><a href="#settings">Settings</a></li>

    <div class="tab-content">
        <div class="tab-pane active" id="home">Home</div>
        <div class="tab-pane" id="profile">Profile</div>
        <div class="tab-pane" id="messages">Messages</div>
        <div class="tab-pane" id="settings">Settings</div>

<script type="text/javascript" src="js/jquery.1.9.1.js"></script>
<script type="text/javascript" src="js/can.jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
var Tabs=can.Control({
        var tab =;
        this.element.children( 'li' ).each(function() {
          tab( $( this ) ).hide();
     // helper function finds the tab for a given li
    tab: function( li ) {
        return $( li.find( 'a' ).attr( 'href' ) );
    "{can.route} {attr}" : function(route, ev, newVal, oldVal){

      button : function(id){
        // if nothing is active, activate the first
        return id ? this.element.find("a[href=#"+id+"]").parent()  : 
                    this.element.children( 'li:first' );

      activate: function( active, oldActive ){
        // deactivate the old active
        var oldButton = this.button(oldActive).removeClass('active');;
        // activate new
        var newButton = this.button(active).addClass('active');;

      'li click':function(el,ev){

new Tabs('#myTab',{attr:'tab'});
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License