SimpleTabsを使ってタブごとにアンカーを貼る方法

このQ&Aのポイント
  • SimpleTabsを使用して、タブを切り替えるごとにページ内リンクを貼る方法をご紹介します。
  • SimpleTabsは、タブのHTMLにulタグとliタグを使用し、JavaScriptを使ってコンテンツを表示する仕組みです。
  • 詳しい実装方法については、SimpleTabsの公式サイトから入手できるzipファイル内のドキュメントを参照してください。
回答を見る
  • ベストアンサー

SimpleTabsを使い、タブごとにアンカーを

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は勉強をしようしようと思いながらも後回しにしていたら、 使用しないといけない状態になってしまい、この有様で本当に申し訳ないです・・・。 どうぞ宜しくお願い致します。

  • motoG
  • お礼率100% (20/20)

質問者が選んだベストアンサー

  • ベストアンサー
  • my--
  • ベストアンサー率89% (91/102)
回答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の 第一引数に渡して呼出してやればよいです。

motoG
質問者

お礼

my--さん、丁寧な回答ありがとうございます。 しかも、こんなに早く…! おかげでずっと悩んでいた問題が、本日中に解決することができました! 特にjavascript追加部分は本当に、自力では組むことはできなかったです。 また、最後の方のmy--さんのコメントについて、、、要勉強です!!すいません!! 本当に本当に助かりました。どうもありがとうございました! ■正しい使い方か分からないけど動作確認ok、自分及び私のような迷い人へメモ■ リンク<a>からタブ切り替えまでが遠い時のページ内移動 <a href="#p1" onclick="return inpagelink(0),location.href='#○○○';">Tab 1</a>

関連するQ&A

  • タブ切り替えについて

    更新情報を知らせるために、ヤフーのトップにあるトピック欄のようなものを作りたいのですが、どうすればいいでしょうか。 http://weble.org/2011/05/24/html-css-tab 上記のページを参考に、     <ul id="tab" class="tab clear"> <li><a href="#page1" class="blue">1</a></li> <li><a href="#page2" class="red">2</a></li> <li><a href="#page3" class="green">3</a></li> <li><a href="#page4" class="yellow">4</a></li>  </ul> <ul> <li><div id="page1">11111 </div></li> <li><div id="page2">22222 </div></li> <li><div id="page3">33333 </div></li> <li><div id="page4">44444 </div></li> </ul> と書いてタブ1の時はpage1を、タブ2ではpage2の内容を、という風には出来たのですが、 下記のようなリストがあり、タブを「全て」「果物」「動物」「家電」と4つ作り、「全て」のタブでは更新情報を全て載せ、それ以外のタブでは各項目の更新情報のみ載せるという方法がわかりません。 2011/08/11 りんご 2011/08/03 みかん 2011/07/30 犬 2011/07/30 テレビ 2011/07/27 猫 また現在、リストの呼び出しは同html内からなのですが、このままですと更新が重なるごとに記述が長くなってしまい、トップページの編集に支障が出てしまうと思うのですが、呼び出しは同htmlではなくても可能なのでしょうか。 単純に"呼び出したいhtml#xxx"と入れても別画面に切り替わってしまい駄目でした。 上手く、内容を説明できず伝わりにくいかと思いますが、よろしくお願いいたします。

  • Jquery タブで、4つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません! http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-1">タブ1</a></li> <li class="menu02"><a href="#tab-2">タブ2</a></li> <li class="menu03"><a href="#tab-3">タブ3</a></li> <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> </ul> <div id="tab-1">タブ1の中身</div> <div id="tab-2">タブ2の中身</div> <div id="tab-3">タブ3の中身</div> </div> 【Jquery】 <script type="text/javascript"> $(document).ready(function(){ $('#topserch div').hide(); $('#topserch div:first').show(); $('#topserch ul li:first').addClass('active'); $('#topserch ul li a').click(function(){ $('#topserch ul li').removeClass('active'); $(this).parent().addClass('active'); var currentTab = $(this).attr('href'); $('#topserch div').hide(); $(currentTab).show(); return false; }); }); </script> まずこのままだ4つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか?

  • タブ切り替えの初期表示に関して

    jQueryを使用したタブの切り替えを実装しています。 下記ソースに関して、デフォルトの状態ですとselectedを設定した <div id="#a">の内容を初期表示します。 別ファイルからのリンクの飛び先が#bの時は初期表示を<div id="#b">にしたいのですが どうすればよいでしょうか? <ul id="tab"> <li class="selected"><a href="#a">a</a></li> <li><a href="#b">b</a></li> <li><a href="#c">c</a></li> </ul> <div id="#a"> aの内容 </div> <div id="#b"> bの内容 </div> <div id="#c"> cの内容 </div> 下記のスクリプトを使用しています。 http://hyper-text.org/archives/2007/09/javascript_tab.shtml

  • カテゴリページ内 複数タブ

    wordpressでサイト作っています idの番号を変えることで1ページ内に#numの連番で複数タブを置ける様にはしたのですが、 while文のなかで番号に連番を振るやり方がわかりません。 初心者ですいませんが、よろしくお願いします <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/ … <script type="text/javascript"> $.hoge = function( target ) { //Default Action target.find(".tab_content").hide(); //Hide all content target.find("ul.tabs li:first").addClass("active").show(); //Activate first tab target.find(".tab_content:first").show(); //Show first tab content //On Click Event target.find("ul.tabs li").click(function() { target.find("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab target.find(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content activeTab = activeTab.replace( '#', '.' ); target.find(activeTab).fadeIn(); //Fade in the active content return false; }); }// $.hoge // -------------------------------------- $(function() { $.hoge( $('#num1') ); $.hoge( $('#num2') ); }); </script> </head> <body> <div id="num1" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> <div id="num2" class="container"> <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div class="tab1 tab_content"> <h2>Gallery</h2> </div> <div class="tab2 tab_content"> <h2>Submit</h2> </div> </div> </div> </body> </html>

  • タブメニューを上下に設置

    下記サイトを参考にタブメニューを作成しました。 http://5am.jp/jquery/jquery_ui_tabs/ こちらのタブを上下に配置し、selectされた状態も連動させたいと思っています。 スクリプトをどのように すればいいかお分かりの方がおられましたら ご教授頂けませんでしょうか。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> <div id="tabs"> <ul> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> <div id="tab1"> <p>タブ1の内容</p> </div> <div id="tab2"> <p>タブ2の内容</p> </div> <div id="tab3"> <p>タブ3の内容</p> </div>       <ul class="bottom_tab"> <li><a href="#tab1"><span>タブ1</span></a></li> <li><a href="#tab2"><span>タブ2</span></a></li> <li><a href="#tab3"><span>タブ3</span></a></li> </ul> </div> どうぞ宜しくお願いいたします。

  • jqueryの tabを使用して外部リンクをしたい

    jqueryの tabを使用して外部リンクをしたい このサイトの下の方の マウスオーバーで切り替えを使用しているのですが タブをマウスオーバーで切り替えつつ、 タブ部分をクリックしたら外部にリンクさせるようするには どうしたらいいでしょうか? http://5am.jp/jquery/jquery_ui_tabs/ 以下タグです。 初心者で大変申し訳ありませんが、ご教授ください。 とても困っています。 よろしくお願いいたします。 ************************************************************* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <head> <!-- jQuery --> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="/jquery-ui-1.8.12.custom.min.js"></script> </head> <body> <script type="text/javascript"> <!-- jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs( { event: "mouseover" } ); } ); // --> </script> <div id="jquery-ui-tabs"> <ul> <li><a href="#jquery-ui-tabs-1">タブ1</a></li> <li><a href="#jquery-ui-tabs-2">タブ2</a></li> <li><a href="#jquery-ui-tabs-3">タブ2</a></li> </ul> <div id="tab_area"> <div id="jquery-ui-tabs-1"> <ul> <li>タブ1内容</li> </ul> </div> <div id="jquery-ui-tabs-2"> <ul> <li>タブ2内容</li> </ul> </div> <div id="jquery-ui-tabs-3"> <ul> <li>タブ3内容</li> </ul> </div> <!--/#tab_area--></div> <!--/#jquery-ui-tabs--></div> </body> </html>

  • タブ切り替えの初期表示について

    タブ切り替えの初期表示について、 http://okwave.jp/qa/q7730198.html?from=navi_recommend http://www.finefinefine.jp/web/kiji422/ を参考に作成中です。 特定のページからリンクされた時のみタブ2を表示させて、 それ以外の時はタブ1を表示させたいです。 ですが、特定のページからリンクされた時にタブ2は表示できるのですが、 それ以外の時は<div class="content_wrap">内容</div>のところは何も表示されません。 どうしたら「それ以外の時はタブ1を表示」できますでしょうか。 ------------------------------------------------------ ●特定のページからのリンク <a href="000.html?no=1">  </a> ●000.htmlのJavaScript $(function() { var n = window.location.href.slice(window.location.href.indexOf('?') + 4); $(".content_wrap").hide(); $(".content_wrap").eq(n).fadeIn(); $(".tab li").removeClass('select'); $(".tab li").eq(n).addClass('select'); $("#tab li").click(function() { var num = $("#tab li").index(this); $(".content_wrap").hide(); $(".content_wrap").eq(num).fadeIn('disnon'); $("#tab li").removeClass('select'); $(this).addClass('select') }); }); ●000.htmlのHTML <div id="sample"> <ul id="tab"> <li>タブ1</li> <li>タブ2</li> </ul> <div class="content_wrap">内容1</div> <div class="content_wrap">内容2</div> </div> ------------------------------------------------------ 初歩的な事かもしれませんが、どうぞよろしくお願いいたします。

  • jQueryでタブ、スライダーを使う際の質問です

    こんにちは。WEBデザインを勉強している者です。 本やネットを見ながらWEBデザインの勉強をしていますが、まだわかっていない事が多く、どなたかお答えして頂けたら大変有り難いです。 jQueryを使って、タブ(2つ)の中にそれぞれ写真を動かすスライダーを作ったのですが、 2つめのタブのスライダーが、写真が終わっても空白のページにどこまでも進んでしまいます。 ページネーションの数も、写真の数以上に表示されていて、何ページ目かわかるように 色が濃くなるはずが、何も変わりません。 ひとつめのタブも、ページネーションが一個飛ばしで表示されてしまいます。 初心者なのに、難しい作りにしたのがまずかったのかと反省しましたが、こういった 作りは不可能なのでしょうか?似た質問を見て、$をjQueryに変えるものや、いろいろ試しましたがチンプンカンプンで全くできませんでした。涙 両方のスライダーを動かそうと思って、 <div id="carousel">と<ul id="carousel_base">のidをclassに変えてしまったのですがそれが原因でしょうか.. もしおわかりになる方がいらっしゃったら、助けて頂きたいです。 スライダーはhttp://black-flag.net/jquery/20110708-3310.htmlここのコードをそのまま使いました。 2つとも動かす為に、$('#carousel')などの#部分を全てクラス$('.carousel')に変えてしまいました。javascriptの方も#から.に変えました。 ですが2つのスライダーがまとめて動いてしまっているような感じもします。 よくわからない質問で申し訳ありません。 下にあるコード部分がもうひとつあって、<div id="tab-2">にしているという感じです。 <div id="tab-1"> <div class="carousel"><!-------------carousel start-----------------------> ↑ここはもともとidでした <ul class="carousel_base"><!-------carsousel_base start------->   ↑ここはもともとidでした <li> <ul> <li><img src="#" /></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li>  <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> <li><a href="#" rel="lightbox[roadtrip]"><img src="#" /></a></li> </ul> </li> <li> <ul> <li><img src="#" /></a></li> </ul> </li> </ul><!-------carsousel_base end--------> </div><!-----------------------carousel end-----------------------------> </div><!--tab-1 end-->

  • javascriptでCSVを読み込み表示する方法を探しています。

    javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ (ulのところのCSS指定は、idではなく、classにしたいです) よろしくお願いいたします。

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1  ●メニュー1-1  ●メニュー1-2  ●メニュー1-3  ●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか? 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか? 以下がコードの一部です。 [html] <div class="tree">   <a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a>   <div class="tree_sub">     <ul>       <li class="left">●メニュー1-1</li>       <li>●メニュー1-2</li>     </ul>     <ul>       <li class="left">●メニュー1-3</li>       <li>●メニュー1-4</li>     </ul>   </div> </div> <div class="tree">   <a href="#">○メニュー2</a> </div> [css] div.tree {   border-bottom:1px solid #000000;   width:365px; } div.tree_sub ul li {   float:left; } div.tree_sub ul li.left {   width:50%; }