Fatal编程技术网
  • javascript/
  • Javascript 如何将内容返回到两个单独的选项卡ID'；使用Twitter引导程序单击一个选项卡'；s Rails 3.2应用程序中的选项卡

Javascript 如何将内容返回到两个单独的选项卡ID'；使用Twitter引导程序单击一个选项卡'；s Rails 3.2应用程序中的选项卡

javascript twitter-bootstrap

Javascript 如何将内容返回到两个单独的选项卡ID'；使用Twitter引导程序单击一个选项卡'；s Rails 3.2应用程序中的选项卡,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,使用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>

使用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>
在用户_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());
       });
   });


$（函数（）{
$（'myTab>li>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
//
$（this.getAttribute（'href'）+'2'）.html（$（this.html（））；
});
});

。。。刷新页面后，我在div中获得了第二个内容，单击第二个选项卡时没有更改，然后单击第一个选项卡时返回到第一个“a”的名称

一次只能访问一个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>

$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
$（this.href+'2'）.html（$（this.href）.html（）
})
内容1
内容2


$（函数（）{
$（'myTab>li>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
//
$（'#extendedView'）.html（$（this.html（））；
});
});

    

  • 

  • 

  • 

  • 


表1
表2
表3
表4
内容2
或 

$（函数（）{
$（'myTab>li>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
//
$（this.getAttribute（'href'）+'2'）.html（$（this.html（））；
});
});

    

  • 

  • 

  • 

  • 


表1
表2
表3
表4
以下是您的问题的有效解决方案（已更新）：

    

  • 

  • 


表1
表2
家庭内容2
配置文件表2
$（文档）.ready（函数（）{
$（“#tab-content2div”）。每个（函数（i，e）{
if（！$（e）.hasClass（'active'））$（e.hide（）；
});
$（'myTab>li>a'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
$（“#tab-content2 div”）。每个（函数（即，e）{
$（e）.隐藏（）；
});
$（this.getAttribute（'href'）+“2”）.show（）；
});
});
这里有一个解决方案，不需要额外的javascript，并且与插件API兼容

原则是使用2
.tab内容
并利用
数据目标
选择器属性

HTML 第一个
.tab内容
包含正常的
.tab窗格


家
班级之家
轮廓
信息
设置
第二个
.tab内容
包含额外的
.tab窗格
s，它们是可选的-加上一个空的（
\notab\u else
）

此属性
数据目标
定义与其关联的
.tab窗格
。神奇之处在于您可以使用
#id
s或
.class
es或任何有效的jQuery选择器

JavaScript 激活所有内容所需的是默认代码：

$（“#myTab a”）。单击（函数（e）{
e、 预防默认值（）；
$（this.tab（'show'）；
});
您还可以使用自己的操作触发API定义的选项卡

如果保留选项卡的默认行为，则不需要

$('#myTab a:first').tab('show');
额外的
  • 如果将
    data toggle=“tab”
    设置为
    a
    元素，则可以不使用任何javascript
  • 如果将
    淡入
    类添加到
    选项卡窗格
    （以及
    淡入
    用于
    活动
    类，则会出现淡入效果）
演示
这是和

嗨，我要用“#home”而不是“#myTab a”？它目前不起作用…仍然不起作用。你刚才建议的第一个在下面的内容中返回了每个选项卡的名称，但你是说你想要一组选项卡来控制两个（单独的）选项卡吗一组窗格？这不是与你之前的问题完全相同吗？@GirlCanCode2接受答案，这样我就可以奖励对你有用的答案嗨，Michael，这是有效的，但默认情况下它同时显示“主页内容2”和“个人资料选项卡2”，并且在我单击它之前不会更改为每个单独的答案。有什么方法可以集成吗？”$（“#myTab a:first”）.tab（'show'）；“进入它？谢谢！是的，我稍后回家时会更新我的回复，以默认方式隐藏这些项目。我更新了我的回复，只显示加载中的“活动”div。Sherbrow，我无法告诉你这对我有多大帮助。非常感谢你给出了这样一个深思熟虑、清晰明了的答案。（对延迟回复表示歉意，我想我之前的评论已经过了一段时间了：P）。@GirlCanCode2我很高兴。如果可以的话，请毫不犹豫地发布一个链接到您的实现，作为一个现实世界的例子。 
$('#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>

    <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>

<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>

<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>

<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>

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