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

Question

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

我已将每个服务（图标）设置为一个类，并将相关类应用于具有相对定位的 div，以使图标位于地图上的正确位置 - div 也用于工具提示功能，所以我无法更改 html 结构 - 我需要显示/隐藏来处理类而不是 div（有很多服务）。

我几乎已经让 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 是你想要的。

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

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

Answer 2

如果您想保持 html 原样，只需将 jQuery 代码更改为：

$(function(){

    $('#menu li').click(function(){
    var divClass = $(this).find('a').data('page');
    $('.main .'+divClass).toggle();

    });
});

更新小提琴：http://jsfiddle.net/M3ZhV/365/

如果你想一次只显示一个，使用这个：

$(function(){
    $('.main > div').hide();
    $('#menu li').click(function(){    
    $('.main > div').hide();
    var divClass = $(this).find('a').data('page');
    $('.main .'+divClass).show();        
    });
});

小提琴：http://jsfiddle.net/M3ZhV/366/

Answer 3

附加堆栈sn-p的简短和简单：

$(function () {
  var curPage = "all";
  $("#menu a").click(function () {            
    curPage = $(this).data("page");
    $("div[class='main'] div[class !='" + curPage +"']").hide(); // hide divs whose classes aren't curPage
    $("div[class='main'] div[class ='" + curPage +"']").show(); // show div whose class is curPage
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

我个人会让标记更有意义/语义。为您的每个部分提供一个 ID 并链接到那里。这样，在 javascript 被禁用的罕见情况下，您的链接仍然可以做一些事情。

$(function () {

    $("#menu a").click(function () {
        $(".main>div").not($(this).attr("href")).hide(); //Hide All Other Div in main
        
        $($(this).attr("href")).show(); //Show the target div
        return false; // stop click default
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="nav">
    <ul id="menu">
        <li id="link1"><a href="#page1">Topic One</a>

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

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

        </li>
    </ul>
</div>
<div class="main">
    <div id="page1">
         <h2>Show Page1</h2>

    </div>
    <div id="page2">
         <h2>Show Page2</h2>

    </div>
    <div id="page3">
         <h2>Show Page3</h2>

    </div>
</div>

Fiddle Version

顺便说一句，我已将 h1 更改为 h2，因为从 SEO 的角度来看这是首选。