くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[jQuery]タブパネル②

タブパネルのテキストだけを改変(修正・更新)したい場合、
予めテキストだけのファイルを読み込むようにしておけば、HTMLを編集せずに更新ができます。

テキストファイルのみを変更すれば、更新も簡単!

 

f:id:pleasure10501:20150511183014p:plain

1、テキストの入っていない空のタブパネルを作ります。

 タブの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;
}

 

2、[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を表示させられないものか?

f:id:pleasure10501:20150511173117p:plain

 テキストだけではなく、リンクを貼ったテキストや画像を表示させられないかな?
と思って試してみました。

 

 

 

 

①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>

jQueryスクリプトはそのまま。

結果 ↓↓   

f:id:pleasure10501:20150511190607p:plain

 

④entame.htmlにCSSを指定して、フォントサイズとpadding-leftの値を変えてみたら ↓↓

f:id:pleasure10501:20150511191427p:plain

どうやら、読込み元のhtmlのスタイルがそのまま反映されるようです。 

 

 

広告を非表示にする