問題タブ [bootstrap-tabs]

ボタンのクリックで次のブートストラップ タブを 1 つずつ表示したいhref?アクティブな最初のタブをクリックする代わりに最初に他のタブをクリックすると、ユーザーは「ユーザーは最初のタブをクリックしてから他のタブをクリックする必要があります」というエラーメッセージを受け取る必要があります noty プラグインを使用すると無効になりますページ読み込み時の最初のタブを除く他のタブ。

ここに私のコードがあります

最初のタブがアクティブなタブである 5 つのタブがあります。ページの読み込み時に、ユーザーが最初のタブではなく他のタブをクリックすると、noty プラグインを使用して「最初にクリックする必要がある」というエラー メッセージがユーザーに表示されます。ユーザーが最初のタブをクリックしたとき、2 番目のタブを有効にする必要がありますが、3 番目と 4 番目のタブは有効にする必要がありません。最後のタブ。

これが私のコードです

私は backbone.js を使用しており、次listViewの for<ul>要素と個別tabViewの for dynamic<li>要素があります。の render メソッドでlistView、新しいtabViewを作成し、それを に追加しelていlistView elます。

これは問題なく、期待どおりに機能します。

新しいタブを動的に追加するliために、最初に 1 つの項目があるため、ユーザーがその項目をクリックすると、li新しいタブの作成のみが行われます。

ここで必要なのは、新しく作成するタブをli+ 要素の前に追加することです。現在、すべての新しいタブはthis+ 要素の後にのみ追加されています。

<ul>以下、参考までにタグのhtmlです。

以下のように render メソッドを変更してみましたlistViewが、うまくいきません。liむしろ、(+)要素自体の上に新しいタブを追加するだけです。

これを行う方法はありますか？

(スタイル設定された) Bootstrap タブを使用します

Bootstrap タブをもう一度クリックしたときに閉じたい。

部分的に機能します。対応するパネルを閉じることはできますが、タブの「アクティブ」クラスを切り替えたい場合、スクリプトが機能しません。

私のJSコード：

すべてのコード (html、css、js) はここに表示されます: https://jsfiddle.net/j9stkqf6/1/

コメントする場合:

パネルが隠れています

ステップ/ステップデバッグモードも試しましたJS関数の終わりまですべて正常に動作し、すべて再表示されます（tab.activeクラスとパネル）

タブをもう一度クリックしたときに、パネルを閉じてタブの「アクティブ」クラスを切り替えるのを手伝ってもらえますか。

ありがとう ！

Bootstrap を使用して ASP.Net にタブを作成しました。

タブのクリックでサーバー呼び出しを行いたいのですが、data-toggleモードになっているため、サーバー側では何も起動できません。jQueryを使って電話をかけてみました。

サーバー側のコードの場合:

ただし、サーバー コードは呼び出されません。ご協力いただきありがとうございます。

2 つの異なるブートストラップ タブ内で MorrisJS チャートを使用しようとしている状況があります。グラフは最初の (デフォルト) タブでは正常にロードされますが、2 番目のタブをクリックすると、グラフがまったく正しくロードされません。まったく同じグラフをコピーして最初と 2 番目のタブに貼り付けているのに、2 番目のタブが読み込まれないのは非常に奇妙です。

これはjsfiddle Iセットアップへのリンクです。https://jsfiddle.net/phz0e68d/5/

コードは次のとおりです。

HTML:

Javascript:

最初のチャートは次のようになります。

2 番目のグラフは次のようになります。

ご覧のとおり、2 番目のグラフはまったく正しく読み込まれていません。負の幅についてコンソールにエラーがありますが、それがどのように可能かはわかりません。

質問: Bootstrap タブ パネルで、対応するタブ コンテンツ領域に MVC ビュー ページを表示するにはどうすればよいですか?

詳細: 次の例 (ここから取得) は、私の ASP.NET MVC Core プロジェクトで正常に動作します。しかし、anchor tag helperユーザーがタブをクリックしたときにアクションメソッドを呼び出したいです。これを行うと、次のエラーが表示されます。たとえば、次のように属性Menu 1を使用するタブでこのエラーが発生します。エラーは、対応するタブのコンテンツに関連する属性に関連していることがわかります。タブがクリックされたときにアクション メソッドを呼び出せるようにするための回避策はありますか?:asp-controllerasp-actionhref

エラー:

Cannot override the 'href' attribute for <a>.

エラーはこの行にあります:<li><a data-toggle="tab" href="#menu1" asp-controller="myController asp-action="myAction">Menu 1</a></li>

以下は、アンカー タグ ヘルパーが使用されていない場合に機能します。