• 締切済み

タブの切り替えについて

こちら(http://5am.jp/jquery/jquery_ui_tabs/)のサイトを参考に JSはそのまま使用し、CSSのみ少し手を加えて、タブの切り替えを作成したのですが、 タブを切り替える度にページトップへスクロールしてしまいます。 JSに手を加えてこれを回避する方法はあるのでしょうか?

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 >JSはそのまま使用し、CSSのみ少し手を加えて ではなくて、JSも変わっているようですね。 ご提示のサイトのリンクが切れているので同じものなのかわかりませんが、配布元のサイト(多分これだと思いますが)にドキュメントや説明があるようですので、そちらできちんと確認なさるのがよろしいかと思います。(スクリプトだけでなくHTMLやCSS、設置方法なども含めて) (私は、英語が苦手なのでさっぱりですが…) http://jqueryui.com/demos/tabs/

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

回答が無いようなので… 内容は見ていませんが、ご提示のサイトのデモではページトップへ戻らないようですが、質問者様の環境でも同様と推測しますが? それなので、 >タブを切り替える度にページトップへスクロールしてしまいます をどうやって実現しているのか、ご質問文からでは不明なので回答のしようがないといったところではないでしょうか。 >JSに手を加えてこれを回避する方法はあるのでしょうか スクリプトで対処は可能だと推測しますが、どうするのが適切なのかは、原因がわからないので不明です。 それよりも、スクリプトで対処するのが適切なのかどうかも疑問に感じます。 推測するところ、 >CSSのみ少し手を加えて が原因かもしれませんから、元に戻してみるとか。 あるいは、手を加えないものがご希望通りに動作することを確認なさってから、改変するとかしてみればわかるかも。

pinkclou10
質問者

お礼

そうですね。落ち着いて見返すと質問し方に問題がありましたね。失礼しました。 参考にしたサイトの <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'normal' } }); }); </script> ではなぜかトップへ戻り <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs(); }); </script> ではトップへ戻らないという状況だったので、 JSに手を加えることで解決するのかと思っておりました。

関連するQ&A

  • jQueryでタブの中に表を入れる

    jQueryを使ってページを表示させようと思っています。 その中で、 http://5am.jp/jquery/jquery_ui_tabs/ このタブのメニューの中に http://styler.jp/blog/2013/01/18/handsontable/ こちらの表を入れ込みたいのですが、どうも上手く行きません。 css/jquery.handsontable.full.cssとjs/jquery.handsontable.full.js、js/jquery-2.min.jsを指定するとタブが上手く表示されず、外すとタブは表示されるのですが表が出て来ません。 どなたか似たようなことやったことのある方、ご教授よろしくお願いします。

  • タブ切り替えが出来るjavascriptを使用しています。

    タブ切り替えが出来るjavascriptを使用しています。 http://5am.jp/jquery/jquery_ui_tabs/ ここのサイトを参考にしてタブ切り替えが動くところまで行きましたが、 どうにかして、別ページからリンクをクリックした時に、特定のタブへ直接飛ぶようにしたいと思っています。 <script type="text/javascript">  $(function() {   $('#ui-tab > ul').tabs({ fx: { opacity: 'toggle', duration: 'fast' } });  }); </script> ヘッダーにある上記のjavascriptを少し編集すればできそうな気がするのですが、 もうお手上げになっちゃいました。 申し訳ないのですが、どなたか教えていただければと思います。 よろしくお願いします。

  • 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>

  • jScrollPaneでtabが空白になります

    jScrollPaneでtabの中身が空白になってしまいます。 ○jqueryを用いたtab構造 ○中身の領域が超えたらjScrollPaneのスクロールバーが現れる としたいのですが、中身が空白になります。 回避方法をご教授下さい。 WIN IE8およびMAC Safari4で動作確認しながら制作しています。 === ステップ1 === こちらのデモサイトを参考に、制作を進めたところ、 http://www.kelvinluck.com/assets/jquery/jScrollPane/tabs_example.html タブ切り替え時にフェードアウト、フェードインさせるために、 {fx: { opacity: 'toggle', duration: 'slow' } } を追加したところ、 なぜかフェードアウト・フェードインが繰り返されて、点滅してしまいました。 また、各タブについて記入量が多くなると、 ページ下方にどんどん空白のスペースが生まれてしまい、見苦しくなってしまいました。 === ステップ2 === そこで、jScrollPaneはそのままに、 tabのjqueryだけこちらのサイトのものを変更しました。 http://www.pharos-ei.com/mike/jquery/examples/ui.tabs.html (htmlの記述はこちらのサイトを参考にしました。 http://5am.jp/jquery/jquery_ui_tabs/) tab単体で動かすと、 ページ下部に空白が出来ず綺麗にフェードするようになったのですが、 jScrollPaneを同期させると、 タブの中身が完全に空白になってしまいます。 (jScrollPane単体ではちゃんと表示されます) なぜか、タブのタイトルを「新しいウィンドウで開く」と、 そのタブの中身だけは表示されてカスタマイズされたスクロールが現れます。 <script type="text/javascript"> $(function() { $('#ui-tab > ul').tabs( {fx: { opacity: 'toggle', duration: 'slow' } }); $('.scrollpane').jScrollPane(); }); </script> という記述をしておりますが、 もしかしたら予め要素を読み込まないといけないのかな・・・と、 $(function(){  の部分を jQuery.event.add(window,"load",function(){ にしたみたのですが、変化無しでした。 ステップ2の方でかなり制作をすすめてしまったので、 こちらのjqueryで問題を解決したいのですが・・・ どうぞヒントになりそうなポイントを挙げて下さいますよう、お願い致します。

  • jQuery UI Tabでタブの一つを新しいウインドウで開きたい

    jQuery UI Tabでタブの一つを新しいウインドウで開きたい jQuery UI Tabを使用してまして、 タブの一つを<div id="ui-tab-xx">の中に表示ではなくて 新しくウィンドウを開いて表示したいのですが、 どのようにカスタマイズすればできますでしょうか。 JS初心者なのでご教授いただければと思います。 使用しているJSは http://allabout.co.jp/internet/javascript/closeup/CU20000121J/ui.tabs.js こちらから拝借しました。 よろしくお願いいたします。

  • jQueryのタブにスクロールバーをつけたい

    jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身1(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか??

  • jQuery タブとスライダーの併用

    jQuery UIを使ったタブの中ひとつひとつにスライダーを置きたいのですが どうしても1つめのタブでしかスライダーが正しく動作しません。 overflow:hidden; が原因なのでしょうか。 どのように書き換えれば動作するようになるでしょうか。 スライダーはflexsliderを http://flexslider.woothemes.com/thumbnail-controlnav.html タブはこちらページを参考にしました http://alphasis.info/2011/07/jquery-ui-tabs-bottom/ css #jquery-ui-tabs { font-size: 12px; color: #666666; } .jquery-ui-tabs-bottom { position: relative; } .jquery-ui-tabs-bottom .ui-tabs-panel { height: 410px;width: 80%; overflow: auto; } .jquery-ui-tabs-bottom .ui-tabs-nav { position: absolute !important; left: 1px; bottom: 1px; right: 1px; padding: 0 0px 0px 0px; } .jquery-ui-tabs-bottom .ui-tabs-nav li { margin-top: -1px; border: 1px solid #d3d3d3 !important; border-top: !important; border-radius: 10px !important; color: #666666; } .jquery-ui-tabs-bottom .ui-tabs-nav li:hover { margin-top: 0px; border: 1px solid #aaaaaa !important; border-top: !important; border-radius: 10px !important; } .jquery-ui-tabs-bottom .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; border: 1px solid #000 !important; border-top: !important; border-radius: 10px !important; background-color: #cd5c5c !important; } script <script type="text/javascript"> // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", controlNav: "thumbnails" }); }); jQuery( function() { jQuery( '#jquery-ui-tabs' ) . tabs(); jQuery( '.jquery-ui-tabs-bottom .ui-tabs-nav, .jquery-ui-tabs-bottom .ui-tabs-nav > *' ) . removeClass( 'ui-corner-all ui-corner-top' ) . addClass( 'ui-corner-bottom' ); } ); </script> HTML <div id="jquery-ui-tabs" class="jquery-ui-tabs-bottom"> <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">その3</a></li> </ul> <div id="jquery-ui-tabs-1"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-2"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div> <div id="jquery-ui-tabs-3"> <div class="flexslider"> <ul class="slides"> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> <li data-thumb="images/XXX.png"> <img src="images/XXX.png"> </li> </ul> </div> </div>

  • jquery ulのtab切り替えについて

    昨日からjqueryを使ってみたのですが、どうしてもうまく表現できません。 書籍のwebcreators6月号を参考にしてほぼそのままのソースを打ち込んだのですが、CSSとJavascriptが機能していません。 ソースは <!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=shift_jis" /> <link href="../js/jquery.ui/themes/flora/flora.all.css" rel="stylesheet" type="text/css" title="Flora(Default)" /> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/ui/ui.tabs.js"></script> <script language="JavaScript" type="text/javascript" src="../js/jquery.ui/jquery-1.2.6.js"></script> <script type"text/javascript"> $(window) .bind ('load',function(){ $('#container-1>ul').tabs(); }); </script> <title>無題ドキュメント</title> </head> <body> <div id="container-1" > <ul> <li><a href="#fragment-1"><span>ホワイト</span></a> </li> <li><a href="#fragment-2"><span>ブラック</span></a></li> </ul> <div id="fragment-1"> <p>ページ1</p> <p>ダミー</p> </div> <div id="fragment-2" style="margin-top:150px;"> <p>ページ2</p> <p>ダミー</p> </div> </div> </body> </html> となっています。 javascriptについてはあまり知識がないので、どの部分が悪いのか教えて頂けないでしょうか? 皆様お忙しい中ご迷惑をおかけしますが、よろしくお願いいたします。

  • jQueryのui.tabのcookieについて

    jQueryのui.tabのcookieについて ブログのサイドバーにタブメニューを設置して、ユーザーがタブをクリックするとそのタブを記憶して同じブログ内の別のページへ移動してもそのタブの内容が表示されるというものを作ろうと思い、 jQueryのui.tabで作ったタブにjquery.cookieを利用してクッキーを保存するようにしたんですが… $('#container1').tabs({event:'click',cookie: { expires: 30 },cache:true}); タブをクリックして同じブログ内の別のページへ移動するとタブが初期状態に戻ってしまいます。 どなたか改善策を知っているかたは教えてもらえないでしょうか??よろしくお願いします!!

  • JSを使ったタブの別ページからのリンク方法について

    初めて質問します。 プログラムはまったくの素人です。 JSを使ったタブの切り換えページを制作しています。 タブの設置は終わっているのですが、 別ページから、タブに直接リンクをしたいと思っています。 下記JSを使用しています。 http://wingplanet.pupu.jp/jquery_tab_fadein.js JSのどこを書き換え、別ページにどのようにリンクをかけば、 タブに直接リンクできるでしょうか? どなたかおわかりになる方がいらしゃいましたら、 教えて下さい。 よろしくお願いします。

専門家に質問してみよう