［jQuery］タブパネル②
タブパネルのテキストだけを改変（修正・更新）したい場合、
予めテキストだけのファイルを読み込むようにしておけば、HTMLを編集せずに更新ができます。
テキストファイルのみを変更すれば、更新も簡単！
１、テキストの入っていない空のタブパネルを作ります。
タブのa要素はテキストファイル名にします。
［HTML］
<div id="container">
<ul class="tab">
<li><a href="javascript.txt" class="selected">JavaScript</a></li>
<li><a href="css.txt">CSS</a></li>
<li><a href="html.txt">HTML</a></li>
<li><a href="jquery.txt">jQuery</a></li>
<li><a href="php.txt">PHP</a></li>
</ul>
<p class="panel"></p>
</div>
［ CSS］
html, body, div, ul, li, a {
margin: 0;
padding: 0;
}
#container{
width:500px;
margin:50px auto;
}
ul.tab{
padding:0;
}
ul.tab li{
list-style-type:none;
width:100px;
height:40px;
float:left;
}
ul.tab li a{
outline:none;
background:url("tab.jpg");
display:block;
color:blue;
line-height:40px;
text-align:center;
}
ul.tab li a.selected{
background:url("tab_selected.jpg");
text-decoration:none;
color:#333;
cursor:default;
}
p.panel {
clear: both;
border: 1px solid #9FB7D4;
border-top: none;
padding: 10px;
text-indent:1em;
color:#333;
}
２、［jQuery］
$(function(){
$('p.panel').load($('ul.tab li a.selected').attr('href'));
$('ul.tab li a').click(function(){
$('ul.tab li a.selected').removeClass('selected');
$(this).addClass('selected');
$('p.panel').load($(this).attr('href'));
return false;
});
});
※load( )はカッコ内に記述したテキストを読み込み、セレクターで指定した要素内のテキストを書き換える。
Yahoo!!のようにHTMLを表示させられないものか？
テキストだけではなく、リンクを貼ったテキストや画像を表示させられないかな？
と思って試してみました。
①entame.htmlというファイルを作る。中身はhtmlのみ。スタイルシートなし。
<body>
<ul>
<li><a href="#">武井咲 恋愛質問にプチ反乱?</li>
<li><a href="#">56歳ニートは芸人 番組に批判</li>
<li><a href="#">嵐ライブで学会の日程変更</li>
<li><a href="#">元「モエヤン」池辺愛が結婚写真</li>
<li><a href="#">乙葉 夫・藤井隆の新曲で共演</li>
</ul>
</body>
②タブのhtmlのリンク先をentame.htmlにする。
<li><a href="entame.html" class="selected">エンタメ</a></li>
結果 ↓↓
④entame.htmlにCSSを指定して、フォントサイズとpadding-leftの値を変えてみたら ↓↓
どうやら、読込み元のhtmlのスタイルがそのまま反映されるようです。
