在html5中通过JavaScript显示隐藏网页内容

<!DOCTYPE html>

<html language="en-us">

	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>Show And Hidden Demo</title>

		<link rel="stylesheet" href="css/style.css" type="text/css" >

		<script type="text/javascript" 

			charset="utf-8"

			src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

		</script>

		<script type="text/javascript"

			charset="utf-8"

			src="js/application.js">

		



		//支持IE6,IE7和IE8的html5结构元素

		document.createElement("header");

		document.createElement("nav");

		document.createElement("section");

		document.createElement("article");

		document.createElement("aside");

		document.createElement("footer");





		$(function(){

			

			//首先要将#service,contact,about部分隐藏

			$("#service,#about,#contact").hide().addClass("hidden");

			

			//将#welcome内容设为显示

			$("#welcom").addClass("visible");

	

			//捕捉导航里的所有单击操作

			$("nav ul").click(function(event){

				

				target=$(event.target);

				//判断单击的是什么元素,如果是单击是一个超链接,则判断它相应的section部分是否是隐藏状态

				if(target.is("a")){

					event.preventDefault();

					//如果判断出它相应的部分是隐藏状态,则应该将其它部分设为隐藏,将该部分设为显示

					if($(target.attr("href")).hasClass("hidden")){

						$(".visible").removeClass("visible")

							     .addClass("hidden")

						             .hide();

						$(target.attr("href")).removeClass("hidden")

							              .addClass("visible")		

								      .show();

					};

				};

			});

		});

		</script>

	</head>

	<body>

		<!--SITE HRADER-->

		<header id="page_header">

			<h1>Demo Test</h1>

			<nav>

				<ul>

					<li><a href="#Welcome">Welcome</a></li>

					<li><a href="#Service">Service</a></li>

					<li><a href="#Contact">Contact</a></li>

					<li><a href="#About">About</a></li>

				</ul>

			</nav>

		</header><!--site header-->

		<section id="content" role="document" aria-live="assertive" aria-automic="true">

			<section id="welcome">

				<header>

					<h1>Welcome</h1>

				</header>

				<p>The Welcome section</p>

			</section>

			<section id="service">

				<header>

					<h1>Service</h1>

				</header>

				<p>The service section</p>

			</section>

			<section id="Contact">

				<header>

					<h1>Contact</h1>

				</header>

				<p>The Contact section</p>

			</section>	

			<section id="About">

				<header>

					<h1>About</h1>

				</header>

				<p>The About section</p>

			</section>

		</section>

	</body>

</html>

你可能感兴趣的:(JavaScript)