網頁分頁功能

程式碼

<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(function(){
  var _showTab = 0;
  var $defaultLi = $('ul.tab_ul li').eq(_showTab).addClass('active');
  $($defaultLi.find('a').attr('href')).siblings().hide();
  $('ul.tab_ul li').click(function() {
    var $this = $(this),
    _clickTab = $this.find('a').attr('href');
    $this.addClass('active').siblings('.active').removeClass('active');
    $(_clickTab).stop(false, true).fadeIn().siblings().hide();

    return false;
  }).find('a').focus(function(){
    this.blur();
  });
});
</script>

<style type="text/css">
a,a:visited {text-decoration: none;}
.clearfix:after{content: ".";display: block;    height: 0;    visibility: hidden;    clear: both;}/* IE pretty stick*/

ul.tab_ul {margin: 0px;padding: 0px;list-style: none;display: block;margin-top: 0px;height: 28px;border: none;
-webkit-margin-before: 0px;-webkit-margin-after:0px;-webkit-padding-start: 0px;}
ul.tab_ul li {float:left;display: -moz-inline-stack;display: inline-block;*display: inline;vertical-align: top;
text-align:center; height: 28px;margin:0px;min-width:84px;width:auto;cursor:pointer;color:#474e55;font-weight:700;padding:0 20px}
ul.tab_ul li:hover {border-bottom:5px #d7d7d7 solid;}
ul.tab_ul li.active {border-bottom:5px #3399cc solid;}

.tab_container {clear: left;width: 700px;;background:#f3f3f3; padding-bottom:10px}
.tab_container .tab_content {padding: 20px; color:#666666; line-height:20px }
</style>
<div id="tabs">
    <div id="tab_menu">
        <ul class="tab_ul clearfix">
            <li><a href="#tab1">Tab1</a></li>
            <li><a href="#tab2">Tab2</a></li>
            <li><a href="#tab3">Tab3</a></li>
            <li><a href="#tab4">Tab4</a></li>
        </ul>
    </div>
          
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            tab1
        </div>
        <div id="tab2" class="tab_content">
            tab2
        </div>
        <div id="tab3" class="tab_content">
            tab3
        </div>
        <div id="tab4" class="tab_content">
            tab4
        </div>
    </div>
</div>

其它參考：
Tabbef Content (www.menucool.com)
JavaScript tabs example (http://www.elated.com/)