Jquery 在单击时显示隐藏多个类

Question

我正在尝试制作一个交互式 map 来显示一系列服务的位置 - 每个服务都有自己的图标，并且我有一个图例(菜单)，需要在单击链接时显示服务并隐藏所有服务其他服务。所有服务都必须在首页加载时显示(在单击任何链接之前)。

我已将每个服务(图标)设置为一个类，并将相关类应用于具有相对定位的 div，以使图标位于 map 上的正确位置 - 该 div 还用于工具提示功能，因此我无法更改 html 结构 - 我需要显示/隐藏才能在类而不是 div 上工作(有很多服务)。

我几乎已经让类(class)的显示/隐藏工作了 http://jsfiddle.net/M3ZhV/363/但它似乎只有在您单击该链接一次后才起作用，即您需要在注册之前单击该链接两次...

这是 html

<div class="nav">
<ul id="menu">
  <li id="link1"><a href="#" data-page="page1">Topic One</a>

  </li>
  <li id="link2"><a href="#" data-page="page2">Topic Two</a>

  </li>
  <li id="link3"><a href="#" data-page="page3">Topic Three</a>

  </li>
</ul>
</div>
<div class="main">
  <div class="page1">
     <h1>Show Page1</h1>
  </div>
  <div class="page2">
     <h1>Show Page2</h1>
  </div>
  <div class="page3">
     <h1>Show Page3</h1>
  </div>
</div>

和 jquery:

$(function () {
  var curPage = "all";
  $("." + curPage).show();
  $("#menu a").click(function () {
    if (curPage.length) {
      $("." + curPage).hide("all");
    }
    curPage = $(this).data("page");
    $("." + curPage).show();
  });
});

任何人都可以帮我指出正确的方向以使其立即发挥作用吗？即页面加载时显示所有类，然后当第一次单击链接时，它仅显示与该链接相关的类并隐藏所有其他类。

我非常感谢任何人就如何实现这一目标提出建议 - 谢谢。

Answer 1

Here是你想要的 fiddle 吗？

只需隐藏所有元素并仅显示被单击的元素。

$(function () {
    var curPage = "all";
            $("." + curPage).show();
    $("#menu a").click(function () {
        $("." + curPage).hide();
        if (curPage.length) {
            $("." + curPage).hide("all");
        }
        curPage = $(this).data("page");
        $("." + curPage).show();
    });
});

<div class="nav">
    <ul id="menu">
        <li id="link1"><a href="#" data-page="page1">Topic One</a>

        </li>
        <li id="link2"><a href="#" data-page="page2">Topic Two</a>

        </li>
        <li id="link3"><a href="#" data-page="page3">Topic Three</a>

        </li>
    </ul>
</div>
<div class="main">
    <div class="page1 all">
         <h1>Show Page1</h1>

    </div>
    <div class="page2 all">
         <h1>Show Page2</h1>

    </div>
    <div class="page3 all">
         <h1>Show Page3</h1>

    </div>
</div>