Twitter引导程序选项卡，查找活动选项卡文本

Twitter bootstrap tab, find active tab text

本文关键字：选项 活动 文本 查找 Twitter 引导程序      更新时间：2023-09-26

我有一个Twitter引导选项卡，如下所示：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代码。

例如，当用户单击"配置文件"选项卡时，按钮的onClick代码将如下所示：

sendTextToServer("mytext2");

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

sendTextToServer("mytext4");

尝试

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

演示：Fiddle

为按钮添加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函数，并将隐藏的文本作为参数

从这里开始应该很容易：

$('#myTab a[href="#profile"]').click(function() { 
    alert("You clicked Profile tab!");
});
相关文章：