7

Twitter Bootstrap の bootstrap-tab.js を使用すると、次のようになります。

<ul class="tabnavcenter" id="myTab">
   <li class="active"><a href="#home" data-toggle="tab">about</a></li>
   <li><a href="#tab2" data-toggle="tab">education</a></li>
   <li><a href="#tab3" data-toggle="tab">experience</a></li>
   <li><a href="#tab4" data-toggle="tab">verified skills</a></li>
   <li><a href="#tab5" data-toggle="tab"> video</a></li>
 </ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Content 1</div>
  <div class="tab-pane" id="profile">...</div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

私が置くとどうすればそれを得ることができますか：

 <div class="tab-content">
   <div class="tab-pane active" id="home">Content 2</div>
 </div>

...プロファイル内の 2 つの場所 (ナビゲーションバーの上と下に 1 つずつ) で、それぞれに異なるコンテンツがある場合、機能しますか? 今のところ、コンテンツは表示されますが、クリックすると消えます。同時に 2 つの「アクティブな」リーが存在することはありますか?

編集：

Rails 3.2 アプリでこれを使用しているため、現在、bootstrap-tab.js には次のものが含まれています。

 $('#myTab a').click(function (e) {
   e.preventDefault();
  $(this).tab('show');
})


 $('#myTab a[href="#home"]').tab('show');
 $('#myTab a[href="#tab2"]').tab('show');
 $('#myTab a[href="#tab3"]').tab('show');
 $('#myTab a[href="#tab4"]').tab('show');
 $('#myTab a[href="#tab5"]').tab('show');
 $('#myTab a[href="#home2"]').tab('show');
 $('#myTab a[href="#tab22"]').tab('show');

そして、user_body.html.erb に以下を入れた後:

 <script type="text/javascript">
    $(function () {
       $('#myTab >li>a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
        //
        $(this.getAttribute('href') + '2').html($(this).html());
       });
   });

...ページを更新した後、div の 2 番目のコンテンツを取得します。2 番目のタブをクリックしても変化はありません。最初のタブをクリックすると、最初の 'a' の名前に戻ります。

それは混乱です。

4

4 に答える 4

18

これは、余分なJavaScriptを使用せず、プラグインAPIと互換性のある1つのソリューションです。

原則は、2を使用.tab-contentし、data-targetselector属性を利用することです。

HTML

最初.tab-contentはあなたの通常が含まれています .tab-pane

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane home-tab">class home</div>
    <div class="tab-pane profile-tab">profile</div>
    <div class="tab-pane messages-tab">messages</div>
    <div class="tab-pane settings-tab">settings</div>
</div>

2つ目は、オプション.tab-contentの追加.tab-paneのsと、空のs （#notab_elseここ）が含まれています。

<div class="tab-content">
    <div class="tab-pane active" id="home_else">home_else</div>
    <div class="tab-pane home-tab">class home</div>
    <div class="tab-pane profile-tab messages-tab settings-tab" id="notab_else"></div>
</div>

次に、1つの追加属性を持つタブがありますdata-target。

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home" data-target="#home, #home_else">Home</a></li>
    <li class=""><a href="#home" data-target=".home-tab">Class Home</a></li>
    <li><a href="#profile" data-target=".profile-tab">Profile</a></li>
    <li><a href="#messages" data-target=".messages-tab">Messages</a></li>
    <li><a href="#settings" data-target=".settings-tab">Settings</a></li>
</ul>

この属性は、それに関連付けられdata-targetた（s）を定義します。.tab-pane魔法は、#idsまたは.classesまたは任意の有効なjQueryセレクターを使用できることです。

JavaScript

すべてをアクティブ化するために必要なのは、デフォルトのコードだけです。

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

また、独自のアクションを使用して、APIで定義されているようにタブをトリガーすることもできます。

タブのデフォルトの動作を維持する場合は、これは必要ありません。

$('#myTab a:first').tab('show');

追加

  • 要素に設定data-toggle="tab"すると、JavaScriptを使用できなくなります。a
  • fadeクラスを.tab-pane（およびそのクラスfade inに.active）追加すると、フェード効果が利用可能になります

デモス

これがデモ（jsfiddle）と追加のデモ（jsfiddle）です

于 2012-06-28T19:45:57.693 に答える
2

これがあなたの問題に対する実用的な解決策です（更新されました）：

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
</div>
<div class="tab-content" id="tab-content2">
    <div class="tab-pane active" id="home2">Home Content 2</div>
    <div class="tab-pane" id="profile2">Profile Tab-2</div>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $("#tab-content2 div").each(function(i, e){ 
        if(!$(e).hasClass('active')) $(e).hide();
    });
    $('#myTab>li>a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
        $("#tab-content2 div").each(function(i, e) {
            $(e).hide();
        });
        $(this.getAttribute('href') + "2").show();
    });
});
</script>
于 2012-06-28T04:57:41.260 に答える
2

一度にアクセスできる ID は 1 つだけです。これが ID と呼ばれる理由です。

最初のものからコンテンツを取得し、2 番目のものに適用します。

$('#myTab a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');

   $(this.href +'2').html($(this.href).html()

})


<div class="tab-content">
  <div class="tab-pane active" id="home">Content 1</div>

</div>


 <div class="tab-content2">
   <div class="tab-pane active" id="home2">Content 2</div>
 </div>
于 2012-06-02T04:08:29.170 に答える
0 
    <script type="text/javascript">
    $(function () {
        $('#myTab >li>a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
            //
            $('#extendedView').html($(this).html());
        });
    });
</script>

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
    <div class="tab-pane" id="messages">Tab-3</div>
    <div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
    <div class="tab-pane active" id="extendedView">Content 2</div>

また

<script type="text/javascript">
    $(function () {
        $('#myTab >li>a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
            //
            $(this.getAttribute('href') + '2').html($(this).html());
        });
    });
</script>

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">Tab-1</div>
    <div class="tab-pane" id="profile">Tab-2</div>
    <div class="tab-pane" id="messages">Tab-3</div>
    <div class="tab-pane" id="settings">Tab-4</div>
</div>
<div class="tab-content2">
    <div class="tab-pane active" id="home2"></div>
    <div class="tab-pane" id="profile2"></div>
    <div class="tab-pane" id="messages2"></div>
    <div class="tab-pane" id="settings2"></div>

</div>
于 2012-06-22T23:23:42.963 に答える