jqueryタブにリンクするにはメニューを選択してください

Question

私はjQuery Show/Hide pluginを使って3つのタブ（地図 - アメリカ、マップヨーロッパ、マップ-ASPAC）でコンテンツを表示しています。

私は国をリストアップする選択メニューを持っていますが、そのうちの1つが選択されたときに、適切な「タブ」が表示されるようにしたいと思います。

私のコードは以下の通りです。

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

「選択」の部分には選択メニューがあり、選択する項目によって適切な「マップ-X」の部分が表示されます。

注：上記のコードを編集して、ユーザーが最初にページにアクセスしたときに、選択が「マップグローバル」divにあることを示しました。

ユーザーがオプションを選択すると、「マップグローバル」が非表示になり、「マップ - アメリカ」、「マップ - ヨーロッパ」または「マップ - アスパック」のdivが表示されます。また、「nav」順序付けられていないリスト内の対応するリンクは、「現在の」クラスが適用されるべきである。あなたが行うことができ、あなたのHTMLを変更したくない場合は

$(function() { 
    $("#jumpMenu").change(function() { 
     $("div.map").hide(); 
     $($(this).val()).show(); 
    }); 
    $("div.map").hide(); 
}); 

Answer 1

：

<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：これはトリック:)

HTMLを行う必要があります

Answer 2

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