[英]Select menu to link to jquery tab
我正在使用jQuery Show / Hide插件在3个选项卡(地图美洲,地图欧洲和地图aspac)中显示内容。
我有一个选择菜单,其中列出了国家/地区,但是当选择了其中一个国家/地区时,我希望相应的“选项卡”可见。
我的代码如下:
<div id="map-global">
<div id="selection">
<select name="jumpMenu" id="jumpMenu">
<option value="#map-americas">Americas - Cuauhtémoc</option>
<option value="#map-americas">Americas - New York</option>
<option value="#map-americas">Americas - Santa Clara</option>
<option value="#map-europe">Europe - Accrington</option>
<option value="#map-europe">Europe - Barcelona</option>
<option value="#map-europe">Europe - Bergamo</option>
<option value="#map-aspac">Asia Pacific - Lane Cove</option>
<option value="#map-aspac">Asia Pacific - Mumbai</option>
<option value="#map-aspac">Asia Pacific - Singapore</option>
</select>
</div>
</div>
<div id="map-americas">
Some content
</div>
<div id="map-europe">
Some content
</div>
<div id="map-aspac">
Some content
</div>
<ul class="nav">
<li><a class="loc-global" href="#map-global"></a></li>
<li><a class="loc-america" href="#map-americas"></a></li>
<li><a class="loc-europe" href="#map-europe"></a></li>
<li><a class="loc-apac" href="#map-aspac"></a></li>
</ul>
如您所见,“选择” div包含选择菜单,并且根据您选择的项目,应显示相应的“ map-X” div。
注意:我已经编辑了上面的代码,以指示当用户第一次进入页面时,选择位于“ map-global” div中。
因此,当用户选择一个选项时,“ map-global”应随后隐藏,而“ map-americas”,“ map-europe”或“ map-aspac” div应显示。 同样,“ nav”无序列表中的相应链接也应应用“当前”类。
这应该可以解决问题:)
HTML:
<div class="map" id="map-americas">
Some content
</div>
<div class="map" id="map-europe">
Some content
</div>
<div class="map" id="map-aspac">
Some content
</div>
JS:
$(function() {
$("#jumpMenu").change(function() {
$("div.map").hide();
$($(this).val()).show();
});
$("div.map").hide();
});
如果您不想更改HTML,则可以执行以下操作:
$(function() {
var $maps = $('#map-americas').add('#map-europe').add('#map-aspac');
$maps.hide();
$maps.add('#map-global');
$navItems = $('ul.nav a');
$("#jumpMenu").change(function() {
$maps.hide();
var mapName = $(this).val();
$(mapName).show();
$navItems.removeClass('current');
$navItems.filter('[href=' + mapName + ']').addClass('current');
});
});
这是我会做:
// Cache variable that searches for all divs with an id that
// begins with "map-" and immediately hide them.
var $mapTabs = $("div[id^='map-']").hide();
// Attach change event handler
$("#jumpMenu").on("change", function() {
// Hide all map tabs
$mapTabs.hide();
// Filter map tabs down to the selected option and show it
$mapTabs.filter("#" + this.value).show();
}).change(); // immediately invoke so the default option's tab is shown
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.