選擇菜單鏈接到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選項卡

回答

相關問題