SimpleTabsを使って、切り替えられるタブごとにページ内リンクを貼りたいのですが、
可能でしょうか?
可能でしたら、恐縮ですが、カスタマイズ方法をお教えください。
SimpleTabs公式サイト:http://komra.de/labs/simpletabs/
※「DOWNLOAD SIMPLETABS v1.3 HERE.」から、php,css,javascriptが入ったzipをDLできます。
言葉だけでは伝わりにくいかと思いましたので、図解の画像を添付いたします。
■■■タブのHTMLはこうなっています■■■
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Other tab</a></li>
</ul>
<div class="simpleTabsContent">Tab 1の内容</div>
<div class="simpleTabsContent">Tab 2の内容</div>
<div class="simpleTabsContent">Other tabの内容</div>
</div>
■■■javascriptは文字数制限があり載せることができなかったので、お手数ですが上記の公式サイトからzipをDLしていただきたく思います。■■■
javascriptは勉強をしようしようと思いながらも後回しにしていたら、
使用しないといけない状態になってしまい、この有様で本当に申し訳ないです・・・。
どうぞ宜しくお願い致します。
No.1ベストアンサー
- 回答日時:
<script type="text/javascript">
function hoge(n) {
var uls = document.getElementsByTagName('ul');
for (var i = 0, l = uls.length; i < l; i++) {
if (uls[i].className === 'simpleTabsNavigation') {
var elems = uls[i].getElementsByTagName('a');
if (elems[n]) {
kmrSimpleTabs.setCurrent(elems[n], 'simpleTabsCookie'); // タブ切り替え
break;
} else return false;
}
}
return false;
}
</script>
<div>
<a href="#p1" onclick="return hoge(0);">Tab 1</a>
<a href="#p2" onclick="return hoge(1);">Tab 2</a>
<a href="#p3" onclick="return hoge(2);">Other tab</a>
</div>
<div class="simpleTabs">
<ul class="simpleTabsNavigation">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Other tab</a></li>
</ul>
<div id="#p1" class="simpleTabsContent">Tab 1の内容</div>
<div id="#p2" class="simpleTabsContent">Tab 2の内容</div>
<div id="#p3" class="simpleTabsContent">Other tabの内容</div>
</div>
上記コードは複数のタブコンテナに対応してませんが、ul要素にidを付与できれば
もっと簡単に書けますし、複数の対応もそれほど難しくないと思います。そのあたりは工夫して下さい。
要はタブ切り替えのトリガとなってるa要素を探し、kmrSimpleTabs.setCurrentの
第一引数に渡して呼出してやればよいです。
my--さん、丁寧な回答ありがとうございます。
しかも、こんなに早く…!
おかげでずっと悩んでいた問題が、本日中に解決することができました!
特にjavascript追加部分は本当に、自力では組むことはできなかったです。
また、最後の方のmy--さんのコメントについて、、、要勉強です!!すいません!!
本当に本当に助かりました。どうもありがとうございました!
■正しい使い方か分からないけど動作確認ok、自分及び私のような迷い人へメモ■
リンク<a>からタブ切り替えまでが遠い時のページ内移動
<a href="#p1" onclick="return inpagelink(0),location.href='#○○○';">Tab 1</a>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<li></li>の数を制限
-
Jqueryでリストのスクロール
-
jquery 親要素以外の取得
-
アコーディオンが思い通りに動...
-
SleniumBasicでコンパイルエラ...
-
id付きのHTMLテキストを変更→元...
-
【jQuery】hoverしたn秒後にイ...
-
大至急!!HPビルダー16の専...
-
ページの上下に同じタブメニュ...
-
2階層のメニューを作ってjQuery...
-
jQueryのアコーディオンメニュ...
-
複数画像のランダム複数表示(...
-
画像の座標位置取得
-
画面が真っ白になるのはどうして?
-
スロットが変な動きをします
-
画像の入れ替え
-
c++std::string型をTCHARに変換...
-
連続したURLへのwindow.openの...
-
javascriptがわからない
-
floatさせたdivタグを折り返さ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jqueryのsortableで一部ソート...
-
jquery ドロップダウンメニュー...
-
JQueryタブのアクティブ アン...
-
jQueryのeqで最後からn番目以降...
-
チェックボックスに入っている...
-
「jQuery」アコーディオンメニ...
-
クリックした<a>タグのみにClas...
-
javascriptでEnterキーをtabキ...
-
【JQuery】アコーディオンの入...
-
タブ切り替えの初期表示について
-
jQueryでネスト構造の<li>がク...
-
どの<li><a> が押されたか判別...
-
大量のチェックボックス状態取...
-
フルスクリーンについて・・・
-
jQueryのhide,showで中の要素が...
-
【jQuery】遅延実行(タイムラ...
-
アコーディオン自動開閉メニュ...
-
jQueryで表示する吹き出しdivの...
-
JqueryFileTree.js でフォルダ...
-
タブ切り替えの初期表示に関して
おすすめ情報