質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1671閲覧

Railsのページネーションで、ページ切り替え後に動きをつける

anpnt

総合スコア29

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/10 09:25

以前も質問させていただきましたが、質問が分かりづらかったため再度投稿です。

現在以下のようなCSSだけでタブ切り替えの実装をしています。

ところが、ページネーション(kaminari)を使ってタブごとにページャーをつけてやると、二番目のタブでページネーションでページが切り替わるたびに一番目のタブにもどってしまいます。(render?redirect?されるため)

そこで、選択されているタブをページが切り替わっても保持する方法や、ページネーション切り替わるときは、切り替わった後に選択しているタブを選択し直すなどの対策が必要だと感じました。

また、ページネーションは2つのモデルを扱っているため、login_logとworking_hourで別々のクエリが発行されるようになってます。

jQueryの知識が乏しいため、ヒントやアドバイス(そもそもタブの実装方法を変えたほうがいいなど)を教えていただけたら助かります。

よろしくお願いいたします。

%div{class: "tabs"} %input{id: "working_hours", type: "radio" ,name: "tab_item", checked: "checked"} %label{class: "tab_item", for: "working_hours"} 作業時間 %input{id: "login_logs", type: "radio" ,name: "tab_item"} %label{class: "tab_item", for: "login_logs"} ログ %div{class: "tab_content", id: "working_hours_content"} %div{class: "tab_content_description"} %table{style:"border-collapse:collapse;"} %thead %tr %th ID %th 名前 %th 作業開始時間 %tbody - @working_hours.each do |working_hour| %tr %td= working_hour.user_id %td= "#{working_hour.user.realname}" %td= "#{working_hour.start_datetime.to_s(:admin_view)}" = paginate(@working_hours, param_name: 'working_hours_page') %div{class: "tab_content", id: "login_logs_content"} %div{class: "tab_content_description"} %table{style:"border-collapse:collapse;"} %thead %tr %th ID %th 名前 %th IPアドレス %tbody - @login_logs.each do |login_log| %tr %td= login_log.user_id %td= login_log.user.realname %td= login_log.login_from_ip_address = paginate(@login_logs, param_name:'login_logs_page')
/*タブ切り替え全体のスタイル*/ .tabs { margin-top: 50px; padding-bottom: 40px; background-color: #fff; width: 720px; } /*1つ1つのタブのスタイル*/ .tab_item { width: calc(100%/2); /*ここの分母をタブの数に合わせる*/ height: 40px; border-bottom: 3px solid #f1c11b; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #d9d9d9; line-height: 40px; font-size: 16px; text-align: center; color: #565656; display: block; float: left; text-align: center; font-weight: bold; transition: all 0.2s ease; } .tab_item:hover { opacity: 0.75; } /*ラジオボタンを全て消す*/ input[name="tab_item"] { display: none; } /*タブ切り替えの中身のスタイル*/ .tab_content { display: none; padding: 20px; clear: both; overflow: scroll; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); height: 400px; } .tab_content_description { padding: 20px 0px 10px 0px; } /*選択されているタブのコンテンツのみを表示*/ #working_hours:checked ~ #working_hours_content, #login_logs:checked ~ #login_logs_content, { display: block; } /*選択されているタブのスタイルを変える*/ .tabs input:checked + .tab_item { background-color: #f1c11b; color: #fff; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問