Webでタブシート
っぽいことをやってみます。
まだベータ版。
<html>
<head>
<script language="javascript">
<!--
function taba() {
document.getElementById('testa').style.display = "block";
document.getElementById('taba').style.backgroundColor = "#999";
document.getElementById('testb').style.display = "none";
document.getElementById('tabb').style.backgroundColor = "#fff";
}
function tabb() {
document.getElementById('testb').style.display = "block";
document.getElementById('tabb').style.backgroundColor = "#999";
document.getElementById('testa').style.display = "none";
document.getElementById('taba').style.backgroundColor = "#fff";
// Mac IEはこうしないと動かない?
// document.getElementById('taba').style.setProperty("background-color","#fff");
}
//-->
</script>
</head>
<body>
<span id="taba" style="border:solid 1px #000; background-color:#999" onclick="javascript:taba()">test_a</span>
<span id="tabb" style="border:solid 1px #000; background-color:#fff" onclick="javascript:tabb()">test_b</span>
<div id="testa" style="border:solid 1px #000; display:block">
test_a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</div>
<div id="testb" style="border:solid 1px #000; display:none">
test_b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
</div>
</body>
</html>
タグ<>が全角になってますのでご注意。
一応、動くには動く。
問題点
1:
音声読み上げソフトでページをよんだときに
先にタブ名が全部読まれちゃう。
2:
javascriptの中身はもうちょっと融通利くように
直したほうがよいです。
ID固定で書いているので。
タブを増やすときとか面倒なんで。
3:
MacIEだけ一部別ロジック。
改良版はまた後日。
まだベータ版。
<html>
<head>
<script language="javascript">
<!--
function taba() {
document.getElementById('testa').style.display = "block";
document.getElementById('taba').style.backgroundColor = "#999";
document.getElementById('testb').style.display = "none";
document.getElementById('tabb').style.backgroundColor = "#fff";
}
function tabb() {
document.getElementById('testb').style.display = "block";
document.getElementById('tabb').style.backgroundColor = "#999";
document.getElementById('testa').style.display = "none";
document.getElementById('taba').style.backgroundColor = "#fff";
// Mac IEはこうしないと動かない?
// document.getElementById('taba').style.setProperty("background-color","#fff");
}
//-->
</script>
</head>
<body>
<span id="taba" style="border:solid 1px #000; background-color:#999" onclick="javascript:taba()">test_a</span>
<span id="tabb" style="border:solid 1px #000; background-color:#fff" onclick="javascript:tabb()">test_b</span>
<div id="testa" style="border:solid 1px #000; display:block">
test_a<br />
a<br />
a<br />
a<br />
a<br />
a<br />
</div>
<div id="testb" style="border:solid 1px #000; display:none">
test_b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
b<br />
</div>
</body>
</html>
タグ<>が全角になってますのでご注意。
一応、動くには動く。
問題点
1:
音声読み上げソフトでページをよんだときに
先にタブ名が全部読まれちゃう。
2:
javascriptの中身はもうちょっと融通利くように
直したほうがよいです。
ID固定で書いているので。
タブを増やすときとか面倒なんで。
3:
MacIEだけ一部別ロジック。
改良版はまた後日。
このネタへのコメント:
コメントはありません。