Twitter 引导选项卡，查找活动选项卡文本答案

【问题标题】：Twitter bootstrap tab, find active tab textTwitter 引导选项卡，查找活动选项卡文本
【发布时间】：2013-09-03 12:26:00
【问题描述】：

我有一个这样的 Twitter Bootstrap 标签：http://jsfiddle.net/mavent/MgcDU/7100/

   <div class="my-example">

    <ul id="myTab" class="nav nav-tabs">
      <li class=""><a href="#home" data-toggle="tab">Home</a></li>
      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
      <li class="dropdown active">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li class="active"><a href="#dropdown1" data-toggle="tab">@fat</a></li>
          <li><a href="#dropdown2" data-toggle="tab">@mdo</a></li>
        </ul>
      </li>
    </ul>

    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade" id="home">
          <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
          <p style="display: none">mytext1</p>
      </div>
      <div class="tab-pane fade" id="profile">
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>
        <p style="display: none">mytext2</p>
      </div>
      <div class="tab-pane fade active in" id="dropdown1">
        <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>
        <p style="display: none">mytext3</p>
      </div>
      <div class="tab-pane fade" id="dropdown2">
        <p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.</p>
        <p  style="display: none">mytext4</p>
      </div>
    </div>

    <button onclick="sendTextToServer('aaaa')"   
             id="sendButton"  status="initial">
        Send now
    </button>

</div>

当用户单击按钮时，我需要找到活动选项卡并获取其隐藏的段落内容并将其传递给按钮 onClick 代码。

例如当用户点击“Profile”标签时，按钮的onClick代码会是这样的：

sendTextToServer("mytext2");

当用户从下拉选项卡中选择“@mdo”时，按钮的 onClick 代码将如下所示：

sendTextToServer("mytext4");

【问题讨论】：

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

试试

function sendTextToServer(){
    var $tab = $('#myTabContent'), $active = $tab.find('.tab-pane.active'), text = $active.find('p:hidden').text();
    alert(text)
}

演示：Fiddle

【讨论】：

谢谢！这帮助我完成了我的一个项目
感谢这个问题帮助了我，

【解决方案2】：

为您的按钮添加 jQuery 点击处理程序

$('#sendButton').click(function(){
    sendTextToServer($('.tab-pane.active').find('p:hidden').text())
});

改变

<button onclick="sendTextToServer('aaaa')"   
         id="sendButton"  status="initial">
    Send now
</button>

到

<button id="sendButton"  status="initial">
    Send now
</button>

这样做将从您的按钮中删除 onclick 处理程序，并将其替换为 jQuery 单击处理程序。然后，jQuery 单击处理程序将使用隐藏文本作为参数调用您的 sendTextToServer 函数

【讨论】：

【解决方案3】：

从这里应该很容易：

$('#myTab a[href="#profile"]').click(function() { 

    alert("You clicked Profile tab!");

});

【讨论】：