选择菜单链接到jquery选项卡

我使用jQuery Show/Hide plugin在3个选项卡（地图美洲，地图欧洲和地图aspac）显示内容。选择菜单链接到jquery选项卡

我有一个选择菜单，列出了国家，但是当其中一个被选中时，我希望适当的'标签'变得可见。

我的代码如下;正如你所看到的，'selection'div保存了选择菜单，并且根据你选择的是哪一个项目，适当的'map-X'div应该显示出来。

注意：我已经编辑了上面的代码，以表明当用户第一次进入页面时，select是在“map-global”div中。

因此，当用户选择一个选项时，应该显示“地图全局”，然后显示“地图 - 美洲”，“地图 - 欧洲”或“地图 - aspac”div。另外，“nav”无序列表中的相应链接应该应用“当前”类。

2012-04-24 doubleplusgood

如果你不想改变你的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'); 
    }); 
});

来源

2012-04-24 15:58:25 TheAntonioReyes

感谢大家的答复。 TheAntonioReyes，你的解决方案似乎对我最有效。在每个标签内容下方，有一个标签名称列表Americas, Europe and Asia Pacific. Would it also be possible to add a 'current' class to the appropriate link/tab name? – doubleplusgood 2012-04-24 18:30:00

added the code above in the question to make it easier to see. :) – doubleplusgood 2012-04-24 19:20:24

I updated my code above to handle that for you. This does assume that since you said the user starts on global that

将以一类'当前' – TheAntonioReyes 2012-04-24 20:51:21

这应该做的伎俩:)

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

来源

2012-04-24 15:39:14 sp00m

放在一个的jsfiddle你http://jsfiddle.net/MxNrc/1/ – Neil 2012-04-24 15:59:07

这就是我要做的：

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

来源

2012-04-24 16:18:55

选择菜单链接到jquery选项卡

回答

相关问题