Question

有人可以帮我连接这些代码。我正在使用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>

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

Answer 1

我建议使用jQuery Library来轻松操作DOM。它非常容易学习，高效和高效节省时间。它还可以避免您在跨浏览器代码问题上遇到很多麻烦......

Answer 2

我稍微更改了您的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>

JQUERY

$("#dropDown").change(function() {          
        var value = $("#dropDown option:selected").val();
        $('#tabbable li).find(a[href=#'+value+']').click();
});

Answer 3

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

<select id="someSelect">

您还需要导航标签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的情况下这样做，那么就需要更多编码。

根据HTML选择值更改选项卡

3 个答案: