- 締切済み
タブ切り替えについて
更新情報を知らせるために、ヤフーのトップにあるトピック欄のようなものを作りたいのですが、どうすればいいでしょうか。 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"と入れても別画面に切り替わってしまい駄目でした。 上手く、内容を説明できず伝わりにくいかと思いますが、よろしくお願いいたします。
- hpt
- お礼率100% (5/5)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- kosukejlampnet
- ベストアンサー率44% (126/282)
ajaxを使えば可能です http://jqueryui.com/demos/tabs/
関連するQ&A
- 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> をクリックした時だけ、普通に別のページにジャンプさせるにはどうしたらよいのでしょうか？
- ベストアンサー
- JavaScript
- タグを切り替えるJavaScriptについて
下記のurlを参考にして、タグを切り替えるJavaScriptを使いレイアウトをしています。 http://archiva.jp/web/javascript/tab-menu.html やりたいことは各内容をIDセレクタでくくりたいのです。 <div id="page1"> <h2>page1</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab"> <li><a href="#page1"><span>page1を選択中</span></a></li> <li><a href="#page2"><span>page2</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> <div id="page2"> <h2>page2</h2> <p>パンクズ</p> <div class="nav"> <ul id="tab2"> <li><a href="#page1"><span>page1</span></a></li> <li><a href="#page2"><span>page2を選択中</span></a></li> <li><a href="#page3"><span>pave3</span></a></li> </ul> </div> <p>段落１</p> </div> ...page3 このようにやりたいのですが、JavaScriptがIDセレクタの"tab"にしか対応していないため、他のページにいくとクリックが効かなくなってしまいます。 idセレクタをclassセレクタに設定し直してもidセレクタにしか対応していないため効きません。 tag2とtab3に対応させるためにはどのようにすればいいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- タブ切り替えの初期表示について
タブ切り替えの初期表示について、 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> ------------------------------------------------------ 初歩的な事かもしれませんが、どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- タブ切り替えの初期表示に関して
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
- ベストアンサー
- JavaScript
- カテゴリページ内 複数タブ
wordpressでサイト作っています idの番号を変えることで１ページ内に#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>
- ベストアンサー
- JavaScript
- jQueryを使用したタブの改造
jQueryの知識が殆どないので教えてください。 以下のページで公開されているタブを改造して利用したいと考えています。 http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ ▼スクリプト部分 $(document).ready(function() { //When page loads... $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active ID content return false; }); }); ▼HTML部分 <ul class="tabs"> <li><a href="#tab1">Gallery</a></li> <li><a href="#tab2">Submit</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> <!--Content--> </div> <div id="tab2" class="tab_content"> <!--Content--> </div> </div> タブをクリックして切り替えるというシンプルなスクリプトなのですが、 1、クリックではなくマウスオーバーでタブを切り替え。 2、アクティブなタブを判別するための要素（？）を「href」ではなく「name」に変更したいと考えています。 自分なりに調べて .click(function() ～の部分を .hover(function() に、 attr("href")の部分をattr("name")（＋HTMLのhref部分も変更）に 変更することでほぼ理想通りの動作をするようになりました。 ただ、このコードの動作で少し問題が発生しています 1つはカーソルを素早く滑らせて切り替えを行うと、本来は隠れているべきアクティブなタブ以外のタブ要素が全て表示されることがあるという点。 2つはHTMLのname部分を「name="#tab1"」というHTML的にはおかしな記載をしないといけないという点です。できれば「name="tab1"」という記載の仕方で動作できればと思います。 解決方法があれば教えてくだささい。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryでタブ、スライダーを使う際の質問です
こんにちは。WEBデザインを勉強している者です。 本やネットを見ながらWEBデザインの勉強をしていますが、まだわかっていない事が多く、どなたかお答えして頂けたら大変有り難いです。 jQueryを使って、タブ（２つ）の中にそれぞれ写真を動かすスライダーを作ったのですが、 ２つめのタブのスライダーが、写真が終わっても空白のページにどこまでも進んでしまいます。 ページネーションの数も、写真の数以上に表示されていて、何ページ目かわかるように 色が濃くなるはずが、何も変わりません。 ひとつめのタブも、ページネーションが一個飛ばしで表示されてしまいます。 初心者なのに、難しい作りにしたのがまずかったのかと反省しましたが、こういった 作りは不可能なのでしょうか？似た質問を見て、＄をjQueryに変えるものや、いろいろ試しましたがチンプンカンプンで全くできませんでした。涙 両方のスライダーを動かそうと思って、 <div id="carousel">と<ul id="carousel_base">のidをclassに変えてしまったのですがそれが原因でしょうか.. もしおわかりになる方がいらっしゃったら、助けて頂きたいです。 スライダーはhttp://black-flag.net/jquery/20110708-3310.htmlここのコードをそのまま使いました。 ２つとも動かす為に、$('#carousel')などの#部分を全てクラス$('.carousel')に変えてしまいました。javascriptの方も#から.に変えました。 ですが２つのスライダーがまとめて動いてしまっているような感じもします。 よくわからない質問で申し訳ありません。 下にあるコード部分がもうひとつあって、<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
- タブメニューを上下に設置
下記サイトを参考にタブメニューを作成しました。 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> どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 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は勉強をしようしようと思いながらも後回しにしていたら、 使用しないといけない状態になってしまい、この有様で本当に申し訳ないです・・・。 どうぞ宜しくお願い致します。
- ベストアンサー
- JavaScript
- 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"))") のように記述するとどうしてエラーになるのでしょうか？ どうぞよろしくお願いいたします(>_<)
- ベストアンサー
- SE・インフラ・Webエンジニア
お礼
kosukejlampnet 様 どうもありがとうございます。 教えていただいたページを見ました。 書き込みを見てから、今日まで色々試してタブ選択時に指定IDの文章を表示させるのはわかったのですが、 [全て][果物][野菜]とタブを作り [全て]では下記のリストから新着順に5件、[果物]では果物のみ新着から5件。といったような方法がわかりませんでした。 <果物>りんご <果物>みかん <野菜>大根 <野菜>ネギ <果物>ぶどう <野菜>トマト <果物>梨 <果物>オレンジ <野菜>にんじん <野菜>ほうれん草 このような方法が学べる本などが有りましたらお教え頂けますでしょうか。 また、ajaxを勉強するには最初に見るべき本はありますでしょうか。 当方はjavascriptやajaxに関して全くの初心者です。 よろしくお願いいたします。