初期表示に関するjQueryタブ切り替えの実装方法

前へ 次へ
このQ&Aのポイント
  • jQueryを使用してタブの切り替えを実装しています。デフォルトの状態では、selectedが設定された<div id='#a'>の内容が初期表示されます。
  • 別ファイルからのリンクの飛び先が#bの場合、<div id='#b'>を初期表示する方法について教えてください。
  • 以下のスクリプトを使用してタブ切り替えを行っています：http://hyper-text.org/archives/2007/09/javascript_tab.shtml
回答を見る
  • ベストアンサー

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

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

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

  • ベストアンサー
回答No.1

jQuery本家のUIを使う方がスマートですね。 http://jqueryui.com/demos/tabs/

25taku
質問者

お礼

ありがとうございます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • タブ切り替えについて

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

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

    タブ切り替えの初期表示について、 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 タブで、４つのliのうち、ひとつだけ除外

    お世話になります。あともう少しのところでうまくいきません！ http://papermashup.com/demos/jquery-tabs/ 上記を使ってタブをやっています 【html】 <div id="test"> <ul> <li class="menu01"><a href="#tab-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> まずこのままだ４つ目のリンクはまったく動きません。 そこで、return false;を取ると、当然変な動きになります。 <li class="menu04"><a href="/test/">こいつだけ違うページへ</a></li> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？

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

    下記サイトを参考にタブメニューを作成しました。 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> どうぞ宜しくお願いいたします。

  • li　３列表示

    こんにちは、 下記のliを3列づつ表示したいのですが、 どのようにすればよいでしょうか？ （２列とかはあるのですが・・・tableにすべき？） <ul id="leftlist1"> <li><a href="#">a1</a></li> <li><a href="#">a2</a></li> <li><a href="#">a3</a></li> </ul> <ul id="leftlist2"> <li><a href="#">b1</a></li> <li><a href="#">b2</a></li> <li><a href="#">b3</a></li> </ul> <ul id="leftlist3"> <li><a href="#">c1</a></li> <li><a href="#">c2</a></li> <li><a href="#">c3</a></li> </ul>

    • ベストアンサー
    • CSS
  • 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">タブ１</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>タブ１内容</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>

  • jQuery tabs 開閉式タブについて

    jQuery tabsについて質問させてください。 知識不足です。。 やりたいこととしましては、複数タブメニューの開閉です。 メニュー１　クリックで⇒開く　⇒再度クリックで閉じる メニュー１開放時⇒メニュー２　クリック⇒メニュー２の内容に切り替わる⇒メニュー２再度クリックで閉じるといった内容です。 開閉だけなら　collapsible: true　で解決ですが、slideToggle　のような効果も付けたい。 単一のメニューの場合は　slideToggle　で一発ですが、複数になったらうまくいかない???? メニューの内容が同時に開いたりしてしまい。。などなど試行錯誤で行き詰まりました。 色々参考にして最終的には以下のようなところにきましたが、メニューを閉じる事ができず どなたかjQueryマスターの方ご教授いただけますと幸いです。 説明下手ですいません。 何卒よろしくお願いいたします。 ※以下のスクリプトにこだわりはございません。 こんなの一発でこうだろという指摘ございましたら遠慮くなく指摘してくださいませ。 javascript ================ <script type="text/javascript"> $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected") $(this).addClass("selected") $("ul.panel li").slideUp("fast") $($(this).attr("href")).slideDown("fast") return false }); }) </script> ///////HTML////// <body> <ul class="tab"> <li><a href="#tabs-1">メニュー１</a></li> <li><a href="#tabs-2">メニュー２</a></li> <li><a href="#tabs-3">メニュー３</a></li> </ul> <ul class="panel"> <li id="tabs-1"></li> <li id="tabs-2"></li> <li id="tabs-3"></li> </ul> </body>

  • jQueryのコードで分からない箇所があります

    プログラミング系の勉強を始めたばかりのど素人につき、間抜けな質問かと思いますが、 ご教授いただけますと幸いです。 ※ 以下今回の質問に関連するソースコード ■html <ul class="tab"> <li><a href="#tab1" class="selected">AAA</a></li> <li><a href="#tab2">BBB</a></li> <li><a href="#tab3">CCC</a></li> </ul> <ul class="panel"> <li id="tab1”>…(省略)…</li> <li id="tab2”>…(省略)…</li> <li id="tab3”>…(省略)…</li> </ul> ■jQuery $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide() }); ——————————————————— 上記のjQueryのコード内の $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")") ↑箇所につきまして、なぜ+(プラス)が２箇所必要なのですか？ $("ul.panel li:not("$("ul.tab li a.selected").attr("href")")") もしくは $("ul.panel li:not($("ul.tab li a.selected").attr("href"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)

  • 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> ■■■ｊavascriptは文字数制限があり載せることができなかったので、お手数ですが上記の公式サイトからzipをDLしていただきたく思います。■■■ javascriptは勉強をしようしようと思いながらも後回しにしていたら、 使用しないといけない状態になってしまい、この有様で本当に申し訳ないです・・・。 どうぞ宜しくお願い致します。

  • 指定要素をスクロール時に非表示

    JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する