有人可以帮我连接这些代码。我正在使用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>
我需要什么才能让它发挥作用? 提前谢谢。
答案 0 :(得分:0)
我建议使用jQuery Library来轻松操作DOM。它非常容易学习,高效和高效节省时间。它还可以避免您在跨浏览器代码问题上遇到很多麻烦......
答案 1 :(得分: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>
JQUERY
$("#dropDown").change(function() {
var value = $("#dropDown option:selected").val();
$('#tabbable li).find(a[href=#'+value+']').click();
});
答案 2 :(得分:0)
您需要在选择列表中使用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的情况下这样做,那么就需要更多编码。