タブの切替えとクリック対応のサンプルです。
素で書くと長くなるので、jqueryを利用しています。
HTMLの整合性とかのチェックはほとんどしていませんので、あくまで雰囲気としてのサンプルです。
コンテンツを読込むのは、最初にサーバ側でセットして出力するか、ajaxで読込むなどご自由に。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
ul#tabs {list-style:none;padding:0;margin:0;cursor:pointer;}
ul#tabs li {width:5em;float:left;margin-right:3px;text-align:center;border:1px solid #888;background-color:#ddd;}
div#content {clear:both; position:relative;top:-1px;border:1px solid #888;z-index:-5;}
div#content, div#content div.tab {width:500px;height:300px;background-color:#fff;}
div#content div.tab {overflow:auto;}
ul#tabs li.active {font-weight:bold;background-color:#fff;border-bottom:1px solid #fff;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var active="active",interval=5000;
var index=0, timerId=null;
var tabs=$("#tabs > li"), content=$("#content > div");
//初期設定
tabs.each(function(){$(this).removeClass(active);});
content.hide();
tabs.eq(0).addClass(active);
content.eq(0).show();
//クリック処理
tabs.click(function(){
if($(this).hasClass("active")) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
});
setTimer();
//タイマー設定
function setTimer(){
timerId=setTimeout(timeProcess,interval);
}
//表示切替え
function timeProcess(){
change((index +1)%tabs.length);
timerId=setTimeout(arguments.callee,interval);
}
//タブ表示
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
content.eq(index).stop(true, true).hide();
index=t_index;
content.eq(index).show("slow");
}
});
</script>
</head>
<body>
<ul id="tabs">
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="content">
<div class="tab">content1</div>
<div class="tab">content2</div>
<div class="tab">content3</div>
</div>
</body>
補足
サンプルまでいただいてありがとうございます。 只今実装、編集をしていますので理解できましたら 再度あらためて御礼いたします。