htmlのタブについて

質問

http://archiva.jp/test/html/tab-menu.htmlのソースのようなタブの作り方で，
下記の条件を満たすものは、ソースのどの部分を修正すればいいのでしょうか？

できれば具体的にお願いいたします。

ご存じの方いらっしゃいましたら、よろしくお願いいたします。

[条件]
・page1～4のタブが選択された時

選択されたタブのボックスの色が赤
page1～4の中で選択されていないタブのボックスの色は白
page5のタブのボックスの色は青。

・page5のタブが選択された時

page1～4のタブのボックスの色は白
page5のタブのボックスの色は青から赤になる

回答No.1

yyr446 · ベストアンサー

ソースのどの部分を修正すればいいのでしょうか？

CSSのクラス定義部分↓の
#tab li.present a {
border-color: #333;
color: #000;
}

javascriptの↓の
for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'present';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
の部分の修正・追加ですね。
（ヒント）
※javascriptでクリックされたタブのクラス名に'present'を付加し、
選ばれてないタブのクラス名をnullにしてます。

回答No.2

fujillin

前回の回答者様の「おまけ」を応用すればできそうな気がします。
　http://okwave.jp/qa/q6354633.html

<li><a href="#page5" class="tab5">Page_5</a></li>
　とでもしておいて、CSSに以下を追加
.tab5 { background-color: blue; }
#tab li a:hover, #tab li.present a { background-color: red; }

ホバー時の挙動が条件にないのでオリジナルのまま（=選択時と同じ色）にしていますが、前回回答者様のように #tab li a:hover と #tab li.present a を別々に指定することで分けることも可能です。

「CSS」、「hover」などをキーにぐぐってみれば、CSSに関してのいろいろな応用の方法が解説されていると思いますので、是非調べてみてください。