株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

21-11)　1. タブパネルのデータを外部ファイルとし簡単に更新できる　　Ajaxのload()を使用

　

基本のタブ（見出し）パネル

動作；　タブ部分（#info_2111 ul.tab li a）をクリック（.click(function()）すると
　　　　　パネルのタブ部分の画像を替え（.addClass("selected")）
　　　　　外部ファイルのデータを読み込み表示（ load()）が切り替わる。

jQueryの書き方 /*------------------------------------ */
//21-11)　 簡単に更新できるﾀﾌﾞﾊﾟﾈﾙ
/*------------------------------------ */
//初期処理
$("#info_2111 p.panel").load($("#info_2111 ul.tab li a.selected").attr("href"));
//クリック処理
$("#info_2111 ul.tab li a").click(function(){
  $("#info_2111 ul.tab li a").removeClass("selected");
  $(this).addClass("selected");
  $("#info_2111 p.panel").load($(this).attr("href"));
  return false;
});
ｃｓｓの書き方 /*-------------------------------------------------------
21-11. 簡単に更新できるﾀﾌﾞﾊﾟﾈﾙ
-------------------------------------------------------- */
#info_2111{
width:500px;
}
#info_2111 ul.tab{
padding:0;
}
#info_2111 ul.tab li{
list-style-type:none;
width:100px;
height:40px;
float:left;
}
#info_2111 ul.tab li a{
outline:none;
background:url("../images/ani_tab.jpg");
display:block;
color:blue;
line-height:40px;
text-align:center;
}
#info_2111 ul.tab li a.selected{
background:url("../images/ani_tab_selected.jpg");
text-decoration:none;
color:#333;
cursor:default;
}
#info_2111 p.panel{
clear:both;
border:1px solid #9FB7D4;
border-top:none;
padding:10px;
text-indent:1em;
color:#333;
}
HTMLの書き方 <div id="info_2111" class="marLft50">
<ul class="tab">
<li><a href="../data/ani_JavaScript.txt" class="selected">JavaScript</a></li>
<li><a href="../data/ani_CSS.txt">CSS</a></li>
<li><a href="../data/ani_HTML.txt">HTML</a></li>
<li><a href="../data/ani_jQuery.txt">jQuery</a></li>
<li><a href="../data/ani_XHTML.txt">XHTML</a></li>
</ul>
<p class="panel"></p>

</div>