タブメニュー作成－CSS Tab Designer

質問

色々調べたのですが、私が希望している結果に辿りつけず、質問させて頂きます。

CSS Tab Designer v2.0を使用してタブメニューを作成しました。

HTML部分で

<ul>
<!-- CSS Tabs -->
<li id="current"><a href="1.html"><span>いち</span></a></li>
<li><a href="2.html"><span>に</span></a></li>
<li><a href="3.html"><span>さん</span></a></li>
<li><a href="4.html"><span>よん</span></a></li>
</ul>

というのが自動作成（tabmenu.htmlと命名）されました。
tabmenu.htmlを起動すると、綺麗なタブが作成されているのですが、
「いち」をクリックすると
tabmenu.htmlから、1.htmlにジャンプしてしまいます。

そこで、以下のようにFrameを作成し
<frameset rows="50,*">
<frame src="tabmenu.html" name="top">
<frame src="1.html" name="bottom">
</frameset>

tabmenu.htmlを編集し
<ul>
<!-- CSS Tabs -->
<li id="current"><a href="1.html" target="bottom"><span>いち</span></a></li>
<li><a href="2.html" target="bottom"><span>に</span></a></li>
<li><a href="3.html" target="bottom"><span>さん</span></a></li>
<li><a href="4.html" target="bottom"><span>よん</span></a></li>
</ul>
とTAGETを指定しました。

一見、うまく動作しているように見えたのですが・・・

タブの「いち」をクリックすると、bottomに1.htmlが表示されます。
タブの「に」をクリックすると、bottomに2.htmlが表示されます。
しかし、タブの「いち」から「に」に色が変わらない（カレントタブに移動しない）のです。
どのタブをクリックしても、「いち」がカレントタブを示す濃い色になってしまいます。
クリックしたタブがカレント色になるようにするには、どのように編集したら良いでしょうか？
そもそも、Frameを使用するのが間違いなのでしょうか？

以下が、自動作成されたCSS部分です、
<style type="text/css">
<!--
body {
margin:0;
padding:0;
font: bold 11px/1.5em Verdana;
}

h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 0px 0px 0px 15px;
}

/*- Menu Tabs F--------------------------- */

#tabsF {
float:left;
width:100%;
background:#efefef;
font-size:93%;
line-height:normal;
border-bottom:1px solid #666;
}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

#tabsF #current a {
background-position:0% -42px;
}
#tabsF #current a span {
background-position:100% -42px;
}
-->
</style>

回答No.1

ORUKA1951 · ベストアンサー

何か根本的な思い違いをされているようです。
<ul>
<li id="current"><a href="1.html"><span>いち</span></a></li>
<li><a href="2.html"><span>に</span></a></li>
<li><a href="3.html"><span>さん</span></a></li>
<li><a href="4.html"><span>よん</span></a></li>
</ul>
のHTMLは、そのページにリンクするわけですから、それぞれのページに同じナビゲーションリンクを設置して、id="current"をそれぞれのリンクに移動します。たとえば2.htmlだと
<ul>
<li><a href="1.html"><span>いち</span></a></li>
<li id="current"><a href="2.html"><span>に</span></a></li>
<li><a href="3.html"><span>さん</span></a></li>
<li><a href="4.html"><span>よん</span></a></li>
</ul>
になります。

<ul>
<li><a href="#Top"><span>いち</span></a></li>
<li><a href="#section1"><span>に</span></a></li>
<li><a href="#section2"><span>さん</span></a></li>
<li><a href="#section3"><span>よん</span></a></li>
</ul>
のようなページ内アンカーを目標にする場合は、javascriptを使うほうが楽です。

お礼

早速のご回答有難うございます。

> 何か根本的な思い違いをされているようです。

との事で、考えなおした所解決しました。
タブの数だけ必要なのですね。
てっきり、1つのHTMLで、リモコンのように使えると思っておりました。

有難う御座いました。