hcmn/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Menu Navigator</title>
        <link rel="stylesheet" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src='script.js'></script>
    </head>
    <body>
     <div class="tabbed-menu">
        <ul class="tabs">
            <li class="selected" id="gangstaIpsum">gangstaIpsum</li>
            <li id="normalIpsum">normalIpsum</li>
            <li id="justNews">justNews</li>
        </ul>
        <div class="content page" id="gangstaIpsum">
            <p>Lorizzle pizzle yippiyo sit amet,
            funky fresh adipiscing the bizzle.
            Nullizzle bling bling velizzle, pizzle
            volutpat, funky fresh quizzle, gravida
            vizzle, arcu. Pellentesque eget fo
            shizzle mah nizzle fo rizzle, mah home
            g-dizzle.</p>
        </div>
        <div class="content page" id="normalIpsum">
            <p>Lorem ipsum dolor sit amet, consectetur
            adipiscing elit. Vestibulum in arcu nunc.
            Donec convallis tempor risus, quis egestas
            metus luctus a. Maecenas laoreet enim ac
            est lobortis auctor pulvinar odio ornare.
            Pellentesque habitant morbi tristique
            senectus et netus et malesuada fames ac
            turpis egestas. Pellentesque turpis mi,
            pulvinar sit amet viverra id, lacinia ut
            metus. </p>
        </div>
        <div class="content page" id="justNews">
            <p>The bank said all managers in the London
            office responsible for the trade had been
            dismissed without severance pay and that
            it planned to revoke two years' worth of
            pay from each of those executives. JPMorgan's
            original estimate of the trading loss,
            disclosed in May, was $2 billion.</p>
        </div>
     </div>
    </body>
</html>

## script.js
// A series of horizontal navigation tabs with JQuery controlling the content area below
// credit: Fred Havemeyer, Codecademy
$(document).ready(function() {
	$tabMenu = $('.tabbed-menu');
	$tabList = $('.tabs li');
	$content = $('.content').hide();

  	var selected = $tabList.filter('.selected').attr('id');

  	$content.filter('#'+selected).show();

  $tabList.click(function(event) {
	selected = $tabList.filter('.selected').attr('id');
    	$target = $(event.target);
    	$tabList.removeClass('selected');
    	$target.addClass('selected');
    	var selectionId = $target.attr('id');

    	var sameContent = (selectionId==selected)?true:false;

        if(!sameContent) {
          $content.fadeOut("slow");
          // can put below line into anonymous function within fadeOut()
          $content.filter('#'+selectionId).fadeIn("slow");
          //$content.filter('#'+selectionId).css("display","block");
        }
  });
});

## style.css
/*  This div class is the container for our menu.
    It defines attributes for everything inside. */
div.tabbed-menu {
    font-family: "Helvetica";
    font-size: 15px;
    width: 600px;
}

/*  This ul class defines how your menu options
    will be arranged and also gives us a nice
    dividing line between the menu and the content. */
ul.tabs {
    text-align: center;
    list-style: none;
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 26px;
    color: #0088CC;
    border-bottom: 1px solid #DDDDDD;
}

/*  This defines the look of the individual tabs of
    your menu when they are contained in a tabs class ul */
ul.tabs li {
    margin-bottom: -1px;
    padding: 3px 10px 0 10px;
    border: 1px solid #DDDDDD;
    background: #EFEFEF;

    /*  inline-block tells the browser to arrange the list
        elements in a line rather than each element on its
        own line. */
    display: inline-block;

    /* The attributes here round the top left
        and right corners of the tabs. */
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
/* This defines what a tab should look like when selected */
ul.tabs li.selected {
    background: #FFF;
    border-bottom-color: transparent;

}
/* This defines how a tab looks when your mouse hovers above it */
ul.tabs li:hover {
    color: #333333;
    cursor: pointer;
    background: #FFFFFF;
}

/*  This centers all of the text within a page element */
div.page {
    text-align: center;
    position: absolute;
}
/*  This overrides the text centering we defined above if
    the text is within a list and also tells your browser
    not to put bullet points next to the text. */
div.page li {
    text-align: left;
    list-style-type: none;
}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Menu Navigator</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src='script.js'></script>
	</head>
	<body>
	<div class="tabbed-menu">
	<ul class="tabs">
	<li class="selected" id="gangstaIpsum">gangstaIpsum</li>
	<li id="normalIpsum">normalIpsum</li>
	<li id="justNews">justNews</li>
	</ul>
	<div class="content page" id="gangstaIpsum">
	<p>Lorizzle pizzle yippiyo sit amet,
	funky fresh adipiscing the bizzle.
	Nullizzle bling bling velizzle, pizzle
	volutpat, funky fresh quizzle, gravida
	vizzle, arcu. Pellentesque eget fo
	shizzle mah nizzle fo rizzle, mah home
	g-dizzle.</p>
	</div>
	<div class="content page" id="normalIpsum">
	<p>Lorem ipsum dolor sit amet, consectetur
	adipiscing elit. Vestibulum in arcu nunc.
	Donec convallis tempor risus, quis egestas
	metus luctus a. Maecenas laoreet enim ac
	est lobortis auctor pulvinar odio ornare.
	Pellentesque habitant morbi tristique
	senectus et netus et malesuada fames ac
	turpis egestas. Pellentesque turpis mi,
	pulvinar sit amet viverra id, lacinia ut
	metus. </p>
	</div>
	<div class="content page" id="justNews">
	<p>The bank said all managers in the London
	office responsible for the trade had been
	dismissed without severance pay and that
	it planned to revoke two years' worth of
	pay from each of those executives. JPMorgan's
	original estimate of the trading loss,
	disclosed in May, was $2 billion.</p>
	</div>
	</div>
	</body>
	</html>
	// A series of horizontal navigation tabs with JQuery controlling the content area below
	// credit: Fred Havemeyer, Codecademy
	$(document).ready(function() {
	$tabMenu = $('.tabbed-menu');
	$tabList = $('.tabs li');
	$content = $('.content').hide();

	var selected = $tabList.filter('.selected').attr('id');

	$content.filter('#'+selected).show();

	$tabList.click(function(event) {
	selected = $tabList.filter('.selected').attr('id');
	$target = $(event.target);
	$tabList.removeClass('selected');
	$target.addClass('selected');
	var selectionId = $target.attr('id');

	var sameContent = (selectionId==selected)?true:false;

	if(!sameContent) {
	$content.fadeOut("slow");
	// can put below line into anonymous function within fadeOut()
	$content.filter('#'+selectionId).fadeIn("slow");
	//$content.filter('#'+selectionId).css("display","block");
	}
	});
	});
	/* This div class is the container for our menu.
	It defines attributes for everything inside. */
	div.tabbed-menu {
	font-family: "Helvetica";
	font-size: 15px;
	width: 600px;
	}

	/* This ul class defines how your menu options
	will be arranged and also gives us a nice
	dividing line between the menu and the content. */
	ul.tabs {
	text-align: center;
	list-style: none;
	position: relative;
	margin: 0;
	padding: 0;
	line-height: 26px;
	color: #0088CC;
	border-bottom: 1px solid #DDDDDD;
	}

	/* This defines the look of the individual tabs of
	your menu when they are contained in a tabs class ul */
	ul.tabs li {
	margin-bottom: -1px;
	padding: 3px 10px 0 10px;
	border: 1px solid #DDDDDD;
	background: #EFEFEF;

	/* inline-block tells the browser to arrange the list
	elements in a line rather than each element on its
	own line. */
	display: inline-block;

	/* The attributes here round the top left
	and right corners of the tabs. */
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	}
	/* This defines what a tab should look like when selected */
	ul.tabs li.selected {
	background: #FFF;
	border-bottom-color: transparent;

	}
	/* This defines how a tab looks when your mouse hovers above it */
	ul.tabs li:hover {
	color: #333333;
	cursor: pointer;
	background: #FFFFFF;
	}

	/* This centers all of the text within a page element */
	div.page {
	text-align: center;
	position: absolute;
	}
	/* This overrides the text centering we defined above if
	the text is within a list and also tells your browser
	not to put bullet points next to the text. */
	div.page li {
	text-align: left;
	list-style-type: none;
	}