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

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

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

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Q&A

解決済

1回答

1300閲覧

Django再描画時にvews.pyからパラメータで2番目のタブをactiveにしたい

nan_c

総合スコア4

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

0グッド

0クリップ

投稿2021/03/25 02:11

編集2021/03/25 09:01

2つのタブがあるhtmlにreturn renderで再描画したい時
パラメータを渡してjavascript(jqry?)でactiveなタブを切り替えたい。

よろしくお願いします。

HTML

1<div> 2 <ul class="nav nav-tabs" role="tablist"> 3 <li role="presentation" class="nav-item active"><a href="#catch" class="nav-link active" aria-controls="profile" role="tab" data-toggle="tab">タブ1</a></li> 4 <li role="presentation" class="nav-item"><a href="#com" class="nav-link" aria-controls="profile" role="tab" data-toggle="tab">タブ2</a></li> 5 </ul> 6 <div class="tab-content"> 7 <!--タブ1 --> 8 <div role="tabpanel" class="tab-pane list_tab-pane table-responsive active" id="tab1"> 9

javascript

1 //コンテンツを一度すべて非表示にし、 2 $('.content_area').css('display','none'); 3 4 //一度タブについているクラスselectを消し、 5 $('.tab_area li').removeClass('select'); 6 7 var tabno = '#com' 8 9 //クリックされたタブと同じ順番のコンテンツを表示します。 10 $('.content_area').eq(tabno).fadeIn(); 11 12 //クリックされたタブのみにクラスselectをつけます。 13 $('ul.tab_area li').eq(tabno).addClass('select') 14 15

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

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

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

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

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

guest

回答1

0

自己解決

回答がないので泥臭いですがパラメータで切り替えました。

HTML

1 {% if active_tab == 'tab2' %} 2 <li role="presentation" class="nav-item"><a href="#tab1" class="nav-link" aria-controls="profile" role="tab" data-toggle="tab">タブ1</a></li> 3 <li role="presentation" class="nav-item active"><a href="tab2" class="nav-link active" aria-controls="profile" role="tab" data-toggle="tab">タブ2</a></li> 4 {% else %} 5 <li role="presentation" class="nav-item active"><a href="tab1" class="nav-link active" aria-controls="profile" role="tab" data-toggle="tab">タブ1</a></li> 6 <li role="presentation" class="nav-item"><a href="tab2" class="nav-link" aria-controls="profile" role="tab" data-toggle="tab">タブ2</a></li> 7 {% endif %} 8 9 10 {% if active_tab == 'tab2' %} 11 <div role="tabpanel" class="tab-pane list_tab-pane table-responsive" id="tab1"> 12 {% else %} 13 <div role="tabpanel" class="tab-pane list_tab-pane table-responsive active" id="tab2"> 14 15 16 17

投稿2021/03/26 01:10

nan_c

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問