jorinvo/bookmarkableTabs.html

## bookmarkableTabs.html
<!DOCTYPE html public>

<head>

  <meta charset=utf-8>

  <title>Bookmarkable Tabs Demo</title>

  <style>

    body {
        font-family: Arial;
    }

    #nav {
        position: fixed;
        z-index: 100;
        padding: 10px;
    }

    #nav a {
        float: left;
        margin: 5px;
        padding: 5px;
        background: #FF3B89;
        text-decoration: none;
        color: #fff;
    }

    #nav a.active {
        cursor: default;
    }

    #nav a.active {
        color: #000;
    }

    .page {
        position: absolute;
        display: none;
        height: 400px;
        width: 400px;
        margin: 5px;
        text-align: center;
    }

    .page h1 {
        padding-top: 100px;
    }

    #page1 {
        background: #8C8CF5;
    }

    #page2 {
        background: #6FFA5C;
    }

    #page3 {
        background: #FFF94F;
    }

  </style>

</head

<body>

<div id="nav">
    <a href="#page1">Page 1</a>
    <a href="#page2">Page 2</a>
    <a href="#page3">Page 3</a>
</div>
<div id="page1" class="page">
    <h1>Hello out there!<br> I'm Page 1!</h1>
</div>
<div id="page2" class="page">
    <h1>Hello out there!<br> I'm Page 2!</h1>
</div>
<div id="page3" class="page">
    <h1>Hello out there!<br> I'm Page 3!</h1>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
$(function() {
    //we pack all the functionality in a jQuery-plugin

    //-nav (required) is the navigation-element
    // containing all the links to the pages
    //-selector (optional) can be specified to filter the
    // selection if the links aren't the direct children of nav
    //-start (optional) specifies the page which will open as default.
    // to set start you have to set selector. If you don't want a specific
    // selector '' works.
    $.bookmarkableTabs = function(nav, selector, start) {

        var activePage;

        //reference to the items triggering the changes
        // needed to know which pages exist
        // and to mark the links as activated later on
        var $links = (function() {
            if (selector) return $(nav).find(selector);
            else return $(nav).children();
        })();

        console.log('$links: ', $links);

        //cache all available pages to check against it later on
        var pages = $.map($links, function(el) {
            return $(el).attr('href');
        });

        //called to check if a requested page is valid or not
        pages.contains = function(el) {
            for (var i = this.length; i >= 0; i--) {
                if (this[i] === el) {
                    return true;
                }
            }
            return false;
        };

        console.log('pages: ', pages);

        //only called once at the beginning to check if the
        //specified hash is a valid page otherwise open the start
        //page which if not other specified is the one of the first link
        window.location.hash = (function() {
            var hash = window.location.hash;
            if (pages.contains(hash)) return hash;
            else if (start) return start;
            else return pages[0];
        })();


        //listening to changes of the hash
        $(window).on('hashchange', function() {

            var hash = window.location.hash;

            if (pages.contains(hash) ) {
                //prevent unneccesary page-reload if
                //requested page is already active
                if (hash !== activePage) {
                    //toggle pages and activated links

                    $(activePage).fadeOut();
                    $links.removeClass('active');
                    activePage = hash;
                    $links.filter('a[href=' + activePage + ']').addClass('active');
                    $(activePage).fadeIn();
                }

            } else {
                //if page requested isn't valid
                //open the last page
                window.location.hash = activePage;
            }
        }).trigger('hashchange');
    };

    //specify a shortcut to call the plugin directly on the navigation element
    $.fn.bookmarkableTabs = function(selector, start) {
        $.bookmarkableTabs(this, selector, start);
    };


    $('#nav').bookmarkableTabs('', '#page2');

});
</script>

</body>
	<!DOCTYPE html public>

	<head>

	<meta charset=utf-8>

	<title>Bookmarkable Tabs Demo</title>

	<style>

	body {
	font-family: Arial;
	}

	#nav {
	position: fixed;
	z-index: 100;
	padding: 10px;
	}

	#nav a {
	float: left;
	margin: 5px;
	padding: 5px;
	background: #FF3B89;
	text-decoration: none;
	color: #fff;
	}

	#nav a.active {
	cursor: default;
	}

	#nav a.active {
	color: #000;
	}

	.page {
	position: absolute;
	display: none;
	height: 400px;
	width: 400px;
	margin: 5px;
	text-align: center;
	}

	.page h1 {
	padding-top: 100px;
	}

	#page1 {
	background: #8C8CF5;
	}

	#page2 {
	background: #6FFA5C;
	}

	#page3 {
	background: #FFF94F;
	}

	</style>

	</head

	<body>

	<div id="nav">
	<a href="#page1">Page 1</a>
	<a href="#page2">Page 2</a>
	<a href="#page3">Page 3</a>
	</div>
	<div id="page1" class="page">
	<h1>Hello out there!<br> I'm Page 1!</h1>
	</div>
	<div id="page2" class="page">
	<h1>Hello out there!<br> I'm Page 2!</h1>
	</div>
	<div id="page3" class="page">
	<h1>Hello out there!<br> I'm Page 3!</h1>
	</div>


	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script>
	$(function() {
	//we pack all the functionality in a jQuery-plugin

	//-nav (required) is the navigation-element
	// containing all the links to the pages
	//-selector (optional) can be specified to filter the
	// selection if the links aren't the direct children of nav
	//-start (optional) specifies the page which will open as default.
	// to set start you have to set selector. If you don't want a specific
	// selector '' works.
	$.bookmarkableTabs = function(nav, selector, start) {

	var activePage;

	//reference to the items triggering the changes
	// needed to know which pages exist
	// and to mark the links as activated later on
	var $links = (function() {
	if (selector) return $(nav).find(selector);
	else return $(nav).children();
	})();

	console.log('$links: ', $links);

	//cache all available pages to check against it later on
	var pages = $.map($links, function(el) {
	return $(el).attr('href');
	});

	//called to check if a requested page is valid or not
	pages.contains = function(el) {
	for (var i = this.length; i >= 0; i--) {
	if (this[i] === el) {
	return true;
	}
	}
	return false;
	};

	console.log('pages: ', pages);

	//only called once at the beginning to check if the
	//specified hash is a valid page otherwise open the start
	//page which if not other specified is the one of the first link
	window.location.hash = (function() {
	var hash = window.location.hash;
	if (pages.contains(hash)) return hash;
	else if (start) return start;
	else return pages[0];
	})();


	//listening to changes of the hash
	$(window).on('hashchange', function() {

	var hash = window.location.hash;

	if (pages.contains(hash) ) {
	//prevent unneccesary page-reload if
	//requested page is already active
	if (hash !== activePage) {
	//toggle pages and activated links

	$(activePage).fadeOut();
	$links.removeClass('active');
	activePage = hash;
	$links.filter('a[href=' + activePage + ']').addClass('active');
	$(activePage).fadeIn();
	}

	} else {
	//if page requested isn't valid
	//open the last page
	window.location.hash = activePage;
	}
	}).trigger('hashchange');
	};

	//specify a shortcut to call the plugin directly on the navigation element
	$.fn.bookmarkableTabs = function(selector, start) {
	$.bookmarkableTabs(this, selector, start);
	};



	$('#nav').bookmarkableTabs('', '#page2');

	});
	</script>

	</body>