我想通过单击选择选项来打开选项卡。以下是我的选择选项和选项卡的代码:
<select>
<option>Select Product</option>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
全部 | A | B | C | D
A、B、C、D 是产品的类别。 A、B、C 和 D 内的产品按类别排列,全部 包含所有列表。我已经使用 jquery 完成了这些选项卡功能。现在我想按照选择选项做同样的事情。
标签 HTML:
<div>
<a href="javascript:void(0);" onclick="javascript:showProduct('', this);" class="active">All</a>
<a href="javascript:void(0);" id='a' onclick="javascript:showProduct('a', this );" >A</a>
<a href="javascript:void(0);" id='b' onclick="javascript:showProduct('b', this);">B</a>
<a href="javascript:void(0);" id='c' onclick="javascript:showProduct('c', this);" >C</a>
<a href="javascript:void(0);" id='d' onclick="javascript:showProduct('d', this);">D</a>
我需要什么:当我选择A时,选项卡A将处于事件状态并显示内容。我怎样才能做到这一点。
请帮忙。谢谢
最佳答案
HTML:
<select id="option">
<option selected value="1">Program 1</option>
<option value="2">Program 2</option>
<option value="3">Program 3</option>
<option value="4">Program 4</option>
</select>
<div class="section" id="1">
<h2 class="head">Program 1 :
<h4>Using date function in javascript.</h4>
</h2>
<input type="button" onclick="date1()" value="Click to see the Date"/>
<p id="dateTest"></p>
<br/>
</div>
<div class="section" id="2">
<h2 class="head">Program 2 :
<h4>Changing content on "Button Click"</h4>
</h2>
<input type="button" onclick="changecontent()" value="Change"/>
<p id="changecontent">
Content before Click.
</p>
<br/>
</div>
JS:
//JS for menu view
$(document).ready(function () {
$('.section').hide();
$('#1').show();
$('#option').change(function (){
$('.section').hide();
$('#'+$(this).val()).show();
if($(this).val()==8)
init();
});
});
您可以根据您的要求在DIV
中放置任何内容。将其视为虚拟数据。
关于javascript - 根据 html 中选择的下拉选择选项打开选项卡内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28451411/