タブで切り替えるようなインターフェースにするには？
[上に]
[前に]
[次に]
tetti
[E-Mail]
2000/03/25(土) 17:31:21
タブを切り替えるような感覚でサクサク使えるリンク集を作りたいと思いました。
スタイルシートでブロック要素の表示・非表示を変えられるようなので、見よう見まねで書いてみましたが、まるで思ったようにいきません。
あと少しで、できそうな気がするんですが、JavaScriptの知恵がないので、あとどう手を加えればいいのか分かりません。
<html>
<head>
<title></title>
<style type="text/css">
<!--
div.LinksWin {
position:relative;
top:0px; left:0px;
}
div.Links {
position:absolute;
top:14px; left:14px;
width:400px; height:300px;
display:none;
border:1px solid #333333;
padding:10px;
background-color:#fef3de;
color:#003366
}
.LinkClick {
color:#0000ff;
text-decoration:underline;
cursor:hand;
}
-->
</style>
<script language="JavaScript">
<!--
function toggle(id) {
disp = document.all(id).style.display;
if(disp == "block") {
document.all(id).style.display = "none";
}
else {
document.all(id).style.display = "block";
}
}
//-->
</script>
</head>
<body>
<span class="LinkClick" onclick="toggle('news_jiji')">時事ニュース</span>
<span class="LinkClick" onclick="toggle('news_inet')">インターネットニュース</span>
<span class="LinkClick" onclick="toggle('news_pc')">PCニュース</span>
<span class="LinkClick" onclick="toggle('news_kojin')">個人ニュースサイト</span>
<div class="LinksWin">
<div class="Links" id="news_jiji">時事ニュース
<ul>
<li>リンク1
<li>リンク2
<li>リンク3
<li>リンク...
</ul>
</div>
<div class="Links" id="news_inet">インターネットニュース</div>
<div class="Links" id="news_pc">PCニュース</div>
<div class="Links" id="news_kojin">個人ニュースサイト</div>
</div>
</body>
</html>
↑で、個々の表示・非表示は切り替えられるんですが、いろいろ選ぶと困惑するインターフェースになってます。(^^ゞ どうかお知恵を貸してください。(__)
安芸川晴海
2000/03/25(土) 19:32:37
Windowsのタブコントロールのような動作を実現するのであれば、スクリプトの部分を、
var curTab=null;
function toggle(id) {
if(curTab!=null)
{
document.all(curTab).style.display="none";
}
curTab=id;
document.all(id).style.display="block";
}
で、いかがでしょう。（関数名と動作が一致していませんが、そのあたりは適当に調整してください）
ただ、document.all(...) を使ったスクリプトはNetscpe Navigatorではエラーを起こしますが……。Layerを併用するか、ブラウザの種類で処理を振り分けるかしたほうが良いでしょう。
ところで、こういうリンク集って素敵ですね。私も真似させていただいていいですか？
tetti
[E-Mail]
2000/03/26(日) 01:27:11
[[解決]]
安芸川晴海 さま、ありがとうございました。
やっぱり、ちょっと手を加えるだけで実現できたんですね。
>ただ、document.all(...) を使ったスクリプトはNetscpe Navigatorではエラーを起こしますが……。
そうなんですよね… けど両対応にできるスキルがないし、うちのページに来る人はIEユーザーしか居ないので、今は考えてません。(^^ゞ でも両対応に越したことはないですね。しかし、そのためにソースが肥大化するとちょっといや〜んな感じなんですよね。
>ところで、こういうリンク集って素敵ですね。私も真似させていただいていいですか？
もちろんですっ！ 省スペースで経済的ですよね(^^ゞ
最初はインラインフレームでやろうかとか考えてたんですけど、読み込み時間はあるし、履歴に入って使いづらいし、こっちの方がサクサク使えていいかなーって。おかげさまで助かりました。(^^)
[上に]
[前に]
[次に]