Question

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

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

我几乎让show / hide为类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

附加了堆栈代码的简短而简单：

＆＃13;

$(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
  });
});

＆＃13;

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

＆＃13;

Answer 4

我个人认为标记更有意义/语义。为每个部分提供一个ID并链接到那里。这种方式对于javascript被禁用的罕见情况，你的链接仍然有用。

＆＃13;

$(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
    });
});

＆＃13;

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

＆＃13;

Fiddle Version

在旁注中，我已将h1更改为h2，因为这更倾向于从SEO的角度来看。

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

4 个答案: