shiftycow/tab_demo.html

## tab_demo.html
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
            $(function(){
                console.log($(".tab"));
                $(".tab").hide();
                $(".active").show();
            });

            function switchTab(tab)
            {
                var newTab = $("#"+tab);

                //hide the old tab
                $(".active").hide();
                $(".active").removeClass("active");

                newTab.show();
                newTab.addClass("active");
            }
        </script>
    </head>
    <body>
        <ul>
            <li><a onclick='switchTab("tab1")' style="cursor: pointer" >Tab 1</a></li>
            <li><a onclick='switchTab("tab2")' style="cursor: pointer" >Tab 2</a></li>
        </ul>
        <div id="tab1" class="tab active">
            Tab 1 content
        </div>

        <div id="tab2" class="tab">
            Tab 2 content
        </div>
    </body>
</html>
	<html>
	<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript">
	$(function(){
	console.log($(".tab"));
	$(".tab").hide();
	$(".active").show();
	});

	function switchTab(tab)
	{
	var newTab = $("#"+tab);

	//hide the old tab
	$(".active").hide();
	$(".active").removeClass("active");

	newTab.show();
	newTab.addClass("active");
	}
	</script>
	</head>
	<body>
	<ul>
	<li><a onclick='switchTab("tab1")' style="cursor: pointer" >Tab 1</a></li>
	<li><a onclick='switchTab("tab2")' style="cursor: pointer" >Tab 2</a></li>
	</ul>
	<div id="tab1" class="tab active">
	Tab 1 content
	</div>

	<div id="tab2" class="tab">
	Tab 2 content
	</div>
	</body>
	</html>