0

jQuery Show/Hide プラグインを使用して、コンテンツを 3 つのタブ (map-americas、map-europe、map-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>

ご覧のとおり、'selection' div には選択メニューがあり、選択した項目に応じて、適切な 'map-X' div が表示されます。

注: 上記のコードを編集して、ユーザーが最初にページにアクセスしたときに選択が "map-global" div にあることを示しました。

したがって、ユーザーがオプションを選択すると、「map-global」が非表示になり、「map-americas」、「map-europe」、または「map-aspac」div が表示されます。また、「nav」順不同リスト内の対応するリンクには、「現在の」クラスが適用されている必要があります。

4

3 に答える 3

0

これは私がすることです：

// 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 デモを見る

于 2012-04-24T16:18:55.427 に答える
0

これでうまくいくはずです:)

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-24T15:39:14.413 に答える
0

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-24T15:58:25.010 に答える