こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

ページを最初に表示したときオンになるタブを作る方法(css,javascript)

cssとjavascriptを使ってタブを使用したページを作っています。
ページ表示時に一番左に表示される01タブを黒く表示しておいてほしいのですが、うまくいきません。
元にしたサンプルはちゃんと表示される仕様になっていましたが、いじっているうちにおかしくなったようです。
原因がわからないのでアドバイスいただけると大変ありがたいです。
よろしくお願い致します。

下記が制作中のhtmlです。
http://www014.upp.so-net.ne.jp/kanikko/test/test.html
js中身*******************
/*--setup--*/
window.onload=function() {
tab.setup = {
tabs: document.getElementById('tab').getElementsByTagName('li'),

pages: [
document.getElementById('topics01'),
document.getElementById('topics02'),
document.getElementById('topics03'),
document.getElementById('topics04'),
document.getElementById('topics05'),
document.getElementById('topics06'),
document.getElementById('topics07')
]
}

tab.init();
}
/*--setup end--*/

var tab = {
init: function(){
var tabs = this.setup.tabs;
var pages = this.setup.pages;

for(i=0; i<pages.length; i++) {
if(i !== 0) pages[i].style.display = 'none';
tabs[i].onclick = function(){ tab.showpage(this); return false; };
}
},

showpage: function(obj){
var tabs = this.setup.tabs;
var pages = this.setup.pages;
var num;

for(num=0; num<tabs.length; num++) {
if(tabs[num] === obj) break;
}

for(var i=0; i<pages.length; i++) {
if(i == num) {
pages[num].style.display = 'block';
tabs[num].className = 'selected';
}
else{
pages[i].style.display = 'none';
tabs[i].className = null;
}
}
}
}

css中身*******************
#javascript_tab_sample {
width:448px;
background:#ffffff;
border:1px solid red;
margin-bottom:10px;
text-align:left;
}

#javascript_tab_sample ul#tab {
margin:0;
padding:0;
border:1px solid black;
background:blue;
float:left;
width:100%;
}

#javascript_tab_sample ul#tab li {
text-align:center;
border:1px solid orange;
border-bottom:none;
float:left;
width:5em;
}

#javascript_tab_sample ul#tab li.selected {
background-color:#000;
}

#javascript_tab_sample ul#tab li.selected a {
color:#fff;
}

投稿日時 - 2008-10-30 00:01:11

QNo.4440125

すぐに回答ほしいです

質問者が選んだベストアンサー

よく見てないのですが、これでどうでしょうか。
<ul id="tab">
<li class="selected"><a href="#topics01">01</a></li>
<li><a href="#topics02">02</a></li>
<li><a href="#topics03">03</a></li>
<li><a href="#topics04">04</a></li>
<li><a href="#topics05">05</a></li>
<li><a href="#topics06">06</a></li>
<li><a href="#topics07">07</a></li>
</ul>

投稿日時 - 2008-10-30 03:44:06

お礼

ありがとうございます!!解決しました!!
class="selected"が必要だったんですね。
本当にありがとうございます。。

投稿日時 - 2008-10-30 08:13:04

ANo.1

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問