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>

...配置文件中的两个位置（一个在导航栏上方，一个在导航栏下方）并且每个位置都有不同的内容，它会起作用吗？截至目前，内容出现，但一旦点击，它就会消失。可以同时有两个“活跃”的 li 吗？

编辑：

由于我在 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 中获得了第二个内容，单击第二个选项卡时没有更改，然后单击第一个选项卡时又更改回第一个“a”的名称。

一团糟。

4

4 回答 4

18

这是一种无需额外 javascript 且与插件 API 兼容的解决方案。

原理是使用 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>

第二个包含可选.tab-content的额外s -加上一个空的（这里）.tab-pane#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>

然后你的标签有一个额外的属性，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定义.tab-pane与其关联的 (s)。神奇之处在于您可以使用#ids 或.classes 或任何有效的 jQuery 选择器。

JavaScript

激活一切所需的只是默认代码：

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

您还可以使用自己的操作来触发 API 定义的选项卡。

如果您保留选项卡的默认行为，则不需要这样做。

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

额外的

  • data-toggle="tab"如果您设置为a元素，您可以免费使用任何 javascript
  • 如果您将fade类添加到.tab-pane（并且fade in对于那个.active） ，则可以使用淡入淡出效果

演示

这是演示（jsfiddle）和额外的演示（jsfiddle）

于 2012-06-28T19:45:57.693 回答
2

您一次只能访问一个 id，这就是为什么它被称为 id。

从第一个获取内容并将其应用于第二个。

$('#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 回答
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 回答
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 回答