漫游的备忘录
转：jQuery简洁实现选项卡示例
2012-3-1 漫游
演示网址http://nettuts.s3.amazonaws.com/001_Tabbed/site/jQuery.html#



源码直接看演示的源代码可能更方便。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

	<title>Tabbed Structure - Regular</title>

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

    

    <script src="scripts/jquery-1.2.3.min.js"></script>

    <script>

	

	  // When the document loads do everything inside here ...

	  $(document).ready(function(){

		

		// When a link is clicked

		$("a.tab").click(function () {

			

			

			// switch all tabs off

			$(".active").removeClass("active");

			

			// switch this tab on

			$(this).addClass("active");

			

			// slide all content up

			$(".content").slideUp();

			

			// slide this content up

			var content_show = $(this).attr("title");

			$("#"+content_show).slideDown();

		  

		});

	

	  });

  </script>

</head>



<body>
<div id="tabbed_box_1" class="tabbed_box">

	<h4>Browse Site <small>Select a Tab</small></h4>

    <div class="tabbed_area">

    

    	

        <ul class="tabs">

            <li><a href="#" title="content_1" class="tab active">Topics</a></li>

            <li><a href="#" title="content_2" class="tab">Archives</a></li>

            <li><a href="#" title="content_3" class="tab">Pages</a></li>
        </ul>

        

        <div id="content_1" class="content">

        	<ul>

            	<li><a href="">HTML Techniques <small>4 Posts</small></a></li>

            	<li><a href="">CSS Styling <small>32 Posts</small></a></li>

            	<li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
            	<li><a href="">Web Miscellanea <small>19 Posts</small></a></li>

            	<li><a href="">Site News <small>6 Posts</small></a></li>

            	<li><a href="">Web Development <small>8 Posts</small></a></li>

			</ul>

        </div>

        <div id="content_2" class="content">
        	<ul>

            	<li><a href="">December 2008 <small>6 Posts</small></a></li>

            	<li><a href="">November 2008 <small>4 Posts</small></a></li>

            	<li><a href="">October 2008 <small>22 Posts</small></a></li>

            	<li><a href="">September 2008 <small>12 Posts</small></a></li>
            	<li><a href="">August 2008 <small>3 Posts</small></a></li>

            	<li><a href="">July 2008 <small>1 Posts</small></a></li>

			</ul>

        </div>

        <div id="content_3" class="content">

        	<ul>

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

            	<li><a href="">Contribute</a></li>

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

			</ul>

        </div>

    

    </div>



</div>
 </body>

</html>