1

有人可以帮我连接这些代码。我正在使用 Twitter 引导程序，并且我有一个下拉列表，当用户在下拉列表中选择一个项目时，我想显示与所选项目相对应的选项卡。

到目前为止，这是我的html代码...

   <select>
     <option>Select...</option>
     <option value=1>Individual Investor</a></option>
     <option value=1>Joint Investors</option>
     <option value=3>Company Investor</option>
     <option value=1>Trust (Individual Trustees)</option>
     <option value=2>Trust (Corporate Trustees)</option>         
     <option value=1>SMSF (Individual Trustees)</option>
     <option value=2>SMSF (Corporate Trustees)</option>
   </select>

    <div class="tabbable"> <!-- Only required for left/right tabs -->
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab0" data-toggle="tab">Investor Details</a></li>
        <li class="hidden"><a href="#tab1" data-toggle="tab">Individuals</a></li>
        <li class="hidden"><a href="#tab2" data-toggle="tab">Joint</a></li>
        <li class="hidden"><a href="#tab3" data-toggle="tab">Company</a></li>
      </ul>
      <div class="tab-content">         
        <div class="active tab-pane" id="tab0">
          <div class="alert">               
            Select your Investor Type from the Dropdown list above
          </div>
            <legend>Investor Details</legend>
            <label>Select your Investor Type from the Dropdown list above</label>               
        </div>
        <div class="tab-pane" id="tab1">
            <legend>Individual Investor Details</legend>
            <label>First Name</label>               
            <input class="input-xlarge" type="text" placeholder="First Name">
        </div>
        <div class="tab-pane" id="tab2">
            <legend>Joint Investor Details</legend>
            <label>Both Names</label>               
            <input class="input-xlarge" type="text" placeholder="Enter both Names">
        </div>
        <div class="tab-pane" id="tab3">
            <legend>Company Investor Details</legend>
            <label>Company Name</label>             
            <input class="input-xlarge" type="text" placeholder="Enter Company Name">
        </div>
      </div>
    </div>

我需要什么才能让它发挥作用？提前致谢。

4

3 回答 3

0

您需要在您的选择列表中添加一个 onchange 事件处理程序，但您需要先给它一个 ID。然后使用所选项目的值作为链接的索引以使选项卡处于活动状态，您可以使用 JQuery。

<select id="someSelect">

您还需要在 nav-tabs ul 上提供一个 ID。这将允许您在选择其他选项卡时看到突出显示的选项卡按钮。

<ul id="someNavTabs" class="nav nav-tabs">

然后您可以使用 JavaScript，如下所示：

document.getElementById('someSelect').onchange = function () {
    var selectedValue = this.options[this.selectedIndex].value;
    var selectedIndex = selectedValue; // added this variable for clarity
    $('#someNavTabs a:eq(' + selectedIndex + ')').tab('show');
};

如果您想在没有 JQuery 的情况下执行此操作，则需要更多编码。

于 2013-03-17T12:09:01.210 回答
0

我稍微更改了您的 HTML，添加了 ID 以选择标签并更改了选项值的值。如果您使用的是 Jquery，这将有效

  <select id="dropDown">
     <option>Select...</option>
     <option value="tab1">Individual Investor</a></option>
     <option value="tab2">Joint Investors</option>
     <option value="tab3">Company Investor</option>
     <option value="tab4">Trust (Individual Trustees)</option>
     <option value="tab5">Trust (Corporate Trustees)</option>         
     <option value="tab6">SMSF (Individual Trustees)</option>
     <option value="tab7">SMSF (Corporate Trustees)</option>
   </select>

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab0" data-toggle="tab">Investor Details</a></li>
    <li class="hidden"><a href="#tab1" data-toggle="tab">Individuals</a></li>
    <li class="hidden"><a href="#tab2" data-toggle="tab">Joint</a></li>
    <li class="hidden"><a href="#tab3" data-toggle="tab">Company</a></li>
  </ul>
  <div class="tab-content">         
    <div class="active tab-pane" id="tab0">
      <div class="alert">               
        Select your Investor Type from the Dropdown list above
      </div>
        <legend>Investor Details</legend>
        <label>Select your Investor Type from the Dropdown list above</label>               
    </div>
    <div class="tab-pane" id="tab1">
        <legend>Individual Investor Details</legend>
        <label>First Name</label>               
        <input class="input-xlarge" type="text" placeholder="First Name">
    </div>
    <div class="tab-pane" id="tab2">
        <legend>Joint Investor Details</legend>
        <label>Both Names</label>               
        <input class="input-xlarge" type="text" placeholder="Enter both Names">
    </div>
    <div class="tab-pane" id="tab3">
        <legend>Company Investor Details</legend>
        <label>Company Name</label>             
        <input class="input-xlarge" type="text" placeholder="Enter Company Name">
    </div>
  </div>
</div>

查询

$("#dropDown").change(function() {          
        var value = $("#dropDown option:selected").val();
        $('#tabbable li).find(a[href=#'+value+']').click();
});​
于 2013-03-17T12:05:52.623 回答
0

我建议使用jQuery 库来轻松操作 DOM。它非常容易学习，高效且省时。它还将为您节省很多跨浏览器代码问题的麻烦......

于 2013-03-17T11:49:06.077 回答