複数のRSSをタブで切り替える

大黒屋本舗よりjsRSS++をダウンロード
jsRSS++はJavascrpitでRSSを表示できるようになります。

ヘッダー部分に

<script type=”text/javascript”>
<!–
$(function(){
 $(“.tabarea .tabs ol”).click(function(){
  var tab = $(this).attr(“id”); //クリックされたタブのidを取得
  var num = tab.split(“_”); //セパレータで分割
  var con = “#content_” + num[1]; //表示させるコンテンツのid名を生成
  $(this).addClass(“selected”); //クリックされたタブのclassにselectedを割り当て
  $(“.tabarea ol:not(#”+tab+”)”).removeClass(“selected”); //その他のタブのclassにあるselectedを削除
  $(“.tabarea div[id^=content]”).hide(); //コンテンツをすべて非表示に
  $(“.tabarea ” + con).show(); //クリックされたタブ対応のコンテンツのみ表示
 });
});
//–>
</script>

設置したい場所に以下のタグを配置

<div> 
<ul> 
<ol id=”tab_1″>RSS1</ol>
<ol id=”tab_2″>RSS2</ol>
<ol id=”tab_3″>RSS3</ol>
</ul> 
<div id=”content_1″><script language=”JavaScript” src=”jsRSS.cgi?RSS１のURL”></script></div>
<div id=”content_2″><script language=”JavaScript” src=”jsRSS.cgi?RSS2のURL”></script></div>
<div id=”content_3″><script language=”JavaScript” src=”jsRSS.cgi?RSS3のURL”></script></div>
</div>

スタイルシートの設定

/*—-ニュースの設定———————–*/
.RSStitle{
 line-height:140%;
}

.tabarea {
 margin-top: 0;
 margin-right: 0;
 margin-bottom: 5px;
 margin-left: 0;
}
ul.tabs {
 margin:0px;
 padding:0px;
 background: #F1F1F1;
}
ul.tabs  ol {
 list-style:none;
 width:72px;
 padding: 5px;
 border-right:1px solid #fff;
 color: #333;
 cursor: pointer;
 text-align:center;
 float:left;
 font-size: 12px;
 margin-right: 1px;
 background-color: #FFF27C;
}
.tabarea .selected {
 color: #000;
 background-color: #D9EF97;
}

div.content {
 clear:both;
}

#content_2, #content_3 {
 display: none;
}

jquery.jsの設置の説明は省きます。