タブメニューの解除方法

質問

http://archiva.jp/web/javascript/tab-menu.html

上記アドレスにあるタブを使用したいと思っているのですが、
タブ表示、そうではない一覧表示をプルダウンにて切り替えが
出来ればなぁと考えております。

どなたか方法を教えていただければと思います。
宜しくお願いいたします。

回答No.2

fujillin · ベストアンサー

#1です。

＞ちなみに「一覧」にしたときにpresentをデフォルト（押してないタブ）と
＞一緒の扱いにしてアンカーリンクを動作させる事はできるのでしょうか？
ご質問の意味がよくわかりませんが、要は通常のアンカーリンクみたいに表示位置をスクロールしたいという意味でしょうか？

一覧表示のときに、タブをクリックするとその内容までスクロールさせるのなら、
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;
}
if (!this.flag) {
if (pages[num]) pages[num].scrollIntoView(false);
return;
}
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;
}
}
},

さらに、一覧に表示を切り替えたときに、presentのタブに相当する内容部分を表示するようにもするなら、
tabswitch: function(obj) {
var i, tabs = this.setup.tabs, pages = this.setup.pages;
obj.innerHTML = this.flag?'タブ表示':'一覧表示';
this.flag = !this.flag;
if (!this.flag) for (i=0; i<pages.length; i++) pages[i].style.display = 'block';
for (i=0; i<tabs.length; i++) if (tabs[i].className == 'present') break;
this.showpage(this.setup.tabs[i<tabs.length?i:0]);
}

＊）element.scrollIntoView(); が通じない古いブラウザもあるかも…
scrollIntoView()とscrollIntoView(false)のどちらが良いのかは、意図が不明なのでよくわからない。
ここまで変わってくると、作り直しのほうがよさそうな気が…

回答No.1

fujillin

極簡単なマイナーチェンジ程度なら…

タブ表示と一覧表示のフラグでも作成しておいて、フラグが立っていればタブの機能を動作、そうでなければ処理しないようにでもしてあげるというのではどうでしょうか？
フラグの切替えの際に非表示のタブを表示してあげるようにするとかが必要になるけど。

例えば、
(1)切替用のボタンとしてHTMLに
<button type="button" onclick="tab.tabswitch(this)">一覧表示</button>
みたいなのを追加

(2)現在のコードの修正（flagに応じて動作/非動作となるように）
init: function(){　の次の行に
　this.flag = true;
showpage: function(obj){　の次の行に
　if (!this.flag) return;
をそれぞれ追加

(3)　var tab に切替え機能(tabswitch)を追加
tabswitch: function(obj) {
var i, tabs = this.setup.tabs, pages = this.setup.pages;
obj.innerHTML = this.flag?'タブ表示':'一覧表示';
if (this.flag = !this.flag) {
for (i=0; i<tabs.length; i++) if (tabs[i].className == 'present') break;
this.showpage(this.setup.tabs[i<tabs.length?i:0]);
} else {
for (i=0; i<pages.length; i++) pages[i].style.display = 'block';
}
}

・・・で、とりあえずいけるけれど、ちゃんとやるなら、それほど長いコードでもないので、作り直してしまったほうがよいかも。

補足

ありがとうございます。
しっかり動作しました！！
ちなみに「一覧」にしたときにpresentをデフォルト（押してないタブ）と一緒の扱いにしてアンカーリンクを動作させる事はできるのでしょうか？