选择菜单以链接到 jquery 选项卡

Select menu to link to jquery tab

本文关键字：jquery 选项 链接 菜单 选择      更新时间：2023-09-26

>我正在使用jQuery Show/Hide插件在3个选项卡中显示内容（map-americas，map-europe和map-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，你可以这样做：

$(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');
    });
});​
这

应该可以解决问题:)

.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();
});

这就是我要做的：

// 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

查看工作 jsFiddle 演示

相关文章：