http://archiva.jp/web/javascript/tab-menu.html
上記アドレスにあるタブを使用したいと思っているのですが、
タブ表示、そうではない一覧表示をプルダウンにて切り替えが
出来ればなぁと考えております。
どなたか方法を教えていただければと思います。
宜しくお願いいたします。
No.2ベストアンサー
- 回答日時:
#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
- 回答日時:
極簡単なマイナーチェンジ程度なら…
タブ表示と一覧表示のフラグでも作成しておいて、フラグが立っていればタブの機能を動作、そうでなければ処理しないようにでもしてあげるというのではどうでしょうか?
フラグの切替えの際に非表示のタブを表示してあげるようにするとかが必要になるけど。
例えば、
(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をデフォルト(押してないタブ)と一緒の扱いにしてアンカーリンクを動作させる事はできるのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- Word(ワード) Wordで作った「表の罫線を部分的に削除したい」 4 2023/07/24 07:00
- Access(アクセス) Access2016でフォーム内にExcelの複数シートを 表示させるイメージで複数テーブルの デー 1 2022/11/25 15:30
- その他(Microsoft Office) EXCELでバーコードを作成すると白くなってコードが見えません 1 2022/04/04 14:24
- その他(ソフトウェア) 時間差でのオートクリック 1 2023/04/12 12:04
- Chrome(クローム) Chromeが強制終了 1 2023/01/29 09:54
- その他(ブラウザ) エッジのスタート画面について 2 2022/08/17 11:12
- Word(ワード) Wordで見出しの設定が巧く出来ません、またスタイルの一部を表示するには(office365) 1 2022/06/22 18:20
- タブレット huion kamvas 13 液タブの方にペイントソフトを表示出来ない。 1 2022/04/24 19:00
- Visual Basic(VBA) Excelのマクロコードについて教えてください 1 2022/03/27 12:02
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
エクセルのアドインタブはどの...
-
Access2016でホームタブしか表...
-
Thunderbirdの受信メールがタブ...
-
Word2010で「表ツール」タブを...
-
多ボタンマウスを使っている人...
-
エクセルで表の数値ではなく、...
-
Onenoteの数式入力できない
-
スマホでタブを閉じても「タブ...
-
エクセルのタブが消える
-
ブラウザで新しいタブ等で開く...
-
Wordに貼り付けた写真や図に、...
-
ウィンドウの開く位置を修正し...
-
急ぎ、サンダーバード 送信ボタ...
-
アイコンが2つだけ小さくなって...
-
[シャットダウン]ボタンが表示...
-
エクセルを開く都度の画面(縮...
-
右クリックも左クリックもメニ...
-
フォルダアイコン 2人の人
-
アウトルックを「タスクバー」...
-
トップに、Googleのアイコンを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Access2016でホームタブしか表...
-
Word2010で「表ツール」タブを...
-
Thunderbirdの受信メールがタブ...
-
エクセルのアドインタブはどの...
-
スマホで YouTube のホーム画面...
-
多ボタンマウスを使っている人...
-
一太郎で、吹き出しって?どう...
-
Google ドキュメントやシートで...
-
Ansysの操作方法
-
googole サーチコンソールのペ...
-
タスクマネージャーでのアプリ...
-
差し込み印刷のグリッド線について
-
スマホでタブを閉じても「タブ...
-
Excel 2013: [リボンのユーザー...
-
Word 2010のファイルをタブ表示...
-
Mac版Excelで、開発タブを表示する
-
facebookサイドバーメニューの...
-
左の目次の再表示の仕方
-
outlook リボン表示の仕方につ...
-
Onenoteの数式入力できない
おすすめ情報