0

我正在使用jQuery Show/Hide 插件在 3 个选项卡（map-americas、map-europe 和 map-aspac）中显示内容。

I have a select menu that lists countries, but when one of those are selected, I would like the appropriate 'tab' to become visible.

我的代码如下；

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

如您所见，“选择”div 包含选择菜单，根据您选择的项目，应该显示适当的“map-X”div。

注意：我已经编辑了上面的代码，以表明当用户第一次来到页面时，选择是在“地图全局”div 中。

因此，当用户选择一个选项时，“map-global”应该隐藏，“map-americas”、“map-europe”或“map-aspac”div 应该显示。“导航”无序列表中的相应链接也应该应用“当前”类。

4

3 回答 3

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