• 締切済み

jQuery UI - Tabs

jQuery UI - Tabsについて質問です。 jQuery UI - Tabsのｒｏｔａｔｅを利用して、自動的にタブが切り替わり、アクティブなタブの色が変わるといったプログラムを作成しました。 選択されたタブの色をCSSに直接記述してある時は、自動的にアクティブなタブの色が切り替わるのですが、"選択されたタブ.css("#555555")"というよプログラム上で指定した場合は正しく色が切り替わりません。 プログラム上で色を指定した場合でも、正しく色が切り替わるようにするにはどのようにしたらよいでしょうか。 お分かりの方がいらっしゃいましたら、ご教示願います。

  • gmsk
  • お礼率0% (0/1)

みんなの回答

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

ご提示の内容だけからではなんともわかりませんが… 適切なタイミングでスタイルの変更を行なっていれば、スクリプトからであろうとCSSからであろうと有効に動作するはずです。 それなので、想像できる主な理由としては、 　1）スクリプトの記述が間違っていて実行されていない。 　2）指定している対象要素が違っている、または、空集合となってしまっている。 　3）書式は正しいが実行されるタイミングが違っているために、見た目に反映されない。 などかと想像しますが？ 質問文の中の、『"選択されたタブ.css("#555555")"』の記述から想像すると、 ・ダブルクォーテーションのネスト ・css()の指定書式はcss( propertyName,value )のはずなので、書式エラー 　http://api.jquery.com/css/ あたりが、一番あやしいかと。

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

関連するQ&A

  • jQueryのtabsについて

    http://www.stilbuero.de/2007/10/23/jquery-ui-tabs-aka-tabs-3/ http://www.stilbuero.de/jquery/tabs_3/ http://www.special-sauce.com/sample/ マウスオーバーでタブ切り替え、かつ自動再生をさせたくて上記2点などのリンク先を参考に作りました。しかし以下のような問題が発生してしまいました。 テキスト1にマウスを置いてアニメーション途中でテキスト2へそしてテキスト1に戻るとアニメーションが途中で止まってしまう。 http://www.stilbuero.de/jquery/tabs_3/rotate.html 上記のデモサイト（こちらはクリックで動きますが。。）でも同じ症状がでるのでJavaScriptを書き足さないといけないのかもしれません。。JavaScriptがイチから書ける人間ではないのでそこをご理解頂いた上でアニメーションが完了するまで次の動きを適応させないなどの解決策をご教授願えないでしょうか。その他ライブラリで実現可能ということであればそちらも教えていただけると助かります。何卒よろしくお願いいたします。

  • Organic Tabs （ jQuery）

    Organic Tabsという、タブのプログラムを使用しています。 http://css-tricks.com/organic-tabs/ 教えて頂きたいのは、別ページからのタブ（3つタブがあるとしたら、真ん中をcurrentになど）へのダイレクトリンクの方法です。 たとえば）......html?=#tab01 など、URLで指定できるものがベストです。 jQueryTabs　では、カスタマイズにより実現しているようです。 素人なのでズバリの記述を教えて頂けるとうれしいです。

  • jQueryについて教えてください。

    http://www.sohtanaka.com/web-design/simple-tabs-w-css-jquery/ 上記ページを参考にサイトを作成しているのですが、 分からない事があります。 タブをクリックすると選択されているタブの背景色が白くなりますが （他はグレー）、 フォント色も変更する場合はどうすれば良いでしょうか。 選択しているタブのみフォントサイズを大きくしてみたり・・・ （↑これは出来ました・・・） 他も色々試してみたのですが、フォント色のみ変更できずなんです。 分かりにくい質問で申し訳ないですが、 詳しい方、ご教示いただければ幸いです。 よろしくお願いします。

  • JavascriptのJQuery UI Tabsで、HTML入りのTabをaddするには?

    JavascriptのJQuery UIのTabsに関する質問です。 以下のURL ​http://www.pharos-ei.com/mike/jquery/examples/ui.tabs.html​ 中の "Triggering, Enabling, Disabling, Adding and Removing Tabs"の項目についてです。 ここで、Append new tabを押すと新たなタブが出来上がりますが、 その時にHTMLを含んだタブを表示したいのですがうまくいきません。 (現状、Append new tabを押したときに白紙のタブが開いているが、 タブを開いた時に、本文を動的に生成して書き込みたい。) 私が考えたのは、 id="new-tab"のdivがHTML内に出来ているので、 そこにdocument.getElementById(new-tab).innerHTMLとする方法でした。 しかし、これがうまくいかない状況です。 どなたか、addで生成したTabにHTMLを書き込む方法をご教授下さい。 具体的には、上記リンクを参考して次のコードを書きました。 ------------------------------------------------- var num = 1; var lavel = '#tab' + num; // ↓#tab1が生成される。ここまではできました。 $('#container-9 > ul').tabs('add', lavel, 'New Tab'); var divid = '"tab' + num + '"'; // ↓これがうまく動きません… document.getElementById(divid).innerHTML = 'ああああああ'; ---------------------------------------------------- 何卒、宜しくお願いします。

  • 「Dialog」と「tabs」併用時の挙動

    jqueryのUIについてです。 Dialogの表示内容をtabsにした場合 場合によっては tabsの1番目のタブがマウスオーバーした時の色で 潰れてしまいます 例(1) Dialogを開く 1番目以外のタブを選択して、Dialogを閉じる 再びDialogを開く 1番目のタブがマウスオーバー色で潰れている 例(2) selected:2などのように 初期タブを指定して、Dialogを開くと 1番目のタブがマウスオーバー色で潰れている 使用テーマはPepper Grinderです 他のテーマなら普通なのかは調べてないですが・・・ tabsのオプションは下記を試しましたがダメでした。 expires: 0, cache:false, 行き詰ってしまいました 改修方法を教えてください。

  • 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でタブの中に表を入れる

    ｊQueryを使ってページを表示させようと思っています。 その中で、 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を指定するとタブが上手く表示されず、外すとタブは表示されるのですが表が出て来ません。 どなたか似たようなことやったことのある方、ご教授よろしくお願いします。

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

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

  • jquery uiが動かない

    jquery uiが動きません。 何度も見直し、プログラムを書いてもどこがいけないかわかりません。 教えていただけたら幸いです。お願いいたします <html> <head> <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> </head> <body> <div id="box">box</div> <style> #box{ width:100px; height:100px; background:red; } </style> <script> $(function(){ $("#box").draggable( axis: 'x'; ); }); </script> </body> </html>

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

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する