tabページにhtmlをロード

jquery

tabページ
最初はiframeとか考えたんだけど。スクロールバーがうざいのでやめた。高さ取れんし。

CSSは同じ物を使っているページじゃないとブラウザによっては問題がある。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title></title>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js"></script>
<script type="text/javascript"> 
//<![CDATA[

$( function() {
  $( "#div01" ).load( "frame.html" )
  $( "#div02" ).load( "frame.html" )
  $( "#div03" ).load( "frame.html" )
  $( "#div04" ).load( "frame.html" )

  $( "#tab li" ).click( function() {
    $( ".load_area" ).addClass( 'hide' );
    $( ".load_area" ).eq( $( "#tab li" ).index( this ) ).removeClass( 'hide' );
    $( "#tab li" ).removeClass( 'selected' );
    $( this ).addClass( 'selected' )
  } );
} );

//]]>
</script> 

<style type="text/css">
#tab li {
  font-size: 12px;
  font-weight:bold;
  float: left;
  padding: 8px 20px;
  list-style: none;
  cursor: pointer;
  background-color: #DDDDFF;
  color: #6666CC;
  border-left: 1px solid #8888FF;
  border-top: 1px solid #8888FF;
}

#tab li.selected {
  color: white;
  background-color:  #8888FF;
}

.load_area {
  clear: left;
  width: 100%;
  height: 100%;
  border: 2px solid #8888FF;
}

.hide {
  display: none;
}
</style>
</head>

<body>
<ul id="tab">
  <li class="selected">menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li style="border-right: 1px solid #8888FF;">menu4</li>
</ul>
<div id="div01" class="load_area"></div>
<div id="div02" class="load_area hide"></div>
<div id="div03" class="load_area hide"></div>
<div id="div04" class="load_area hide"></div>

</body>
</html>