twitter-bootstrap Twitter 引导选项卡，查找活动选项卡文本

Twitter bootstrap tab, find active tab text

提问by trante

I have a Twitter Bootstrap tab like this: http://jsfiddle.net/mavent/MgcDU/7100/

我有一个像这样的 Twitter Bootstrap 标签：http: //jsfiddle.net/maven/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>

When user clicks button, I need to find the active tab and get its hidden paragraph content and pass this to button onClick code.

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

For example when user clicks "Profile" tab, button's onClick code will be like this:

例如，当用户单击“个人资料”选项卡时，按钮的 onClick 代码将如下所示：

sendTextToServer("mytext2");

When user selects "@mdo" from Dropdown tab, button's onClick code will be like this:

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

sendTextToServer("mytext4");

回答by Arun P Johny

Try

尝试

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

Demo: Fiddle

演示：小提琴

回答by DGS

Add the jQuery click handler for your button

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

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

and change

和改变

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

to

到

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

Doing this will remove the onclick handler from your button and replace it with a jQuery click handler. The jQuery click handler will then call your sendTextToServer function with the hidden text as a parameter

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

回答by Stefan

From here should be easy:

从这里应该很容易：

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

    alert("You clicked Profile tab!");

});