Question

我使用jQuery Show/Hide plugin在3个标签中显示内容（map-americas，map-europe和map-aspac）。

我有一个列出国家/地区的选择菜单，但是当选择其中一个国家/地区时，我希望选择相应的选项卡＆＃39;变得可见。

我的代码如下;

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

正如您所看到的，＆＃39;选择＆＃39; div保存选择菜单，根据您选择的项目，选择适当的地图-X＆＃39; div应该显示。

注意：我编辑了上面的代码，表明当用户第一次访问该页面时，选择位于＆＃34; map-global＆＃34;格。

因此，当用户选择一个选项时，＆＃34; map-global＆＃34;然后应该隐藏＆＃34; map-americas＆＃34;，＆＃34; map-europe＆＃34;或＆＃34; map-aspac＆＃34; div应该显示。还有＆＃34; nav＆＃34;中的相应链接。无序列表应该有一个＆＃34;当前＆＃34;上课。

Answer 1

这应该可以解决问题：）

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

Answer 2

如果您不想更改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');
    });
});

Answer 3

这就是我要做的事情：

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

的 See working jsFiddle demo 的

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

3 个答案: