2

我有一个这样的 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 代码。

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

sendTextToServer("mytext2");

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

sendTextToServer("mytext4");
4

3 回答 3

9

尝试

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

演示：小提琴

于 2013-09-03T12:32:00.313 回答
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 函数

于 2013-09-03T12:34:40.150 回答
1

从这里应该很容易：

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

    alert("You clicked Profile tab!");

});
于 2014-09-22T22:37:02.470 回答