显示 DIV(s) 对应于 link 单击并显示 ( ) 所有 DIV(s) 当 "view all" link 被单击

Question

这里是 html

<div>
  <ul class="nav navbar-nav" id="menu">
    <li><a href="#" data-page="showall">View All</a></li>
    <li><a href="#" data-page="page1">Antigua</a></li>
    <li><a href="#" data-page="page2">Barbados</a></li>
    <li><a href="#" data-page="page3">Tortola, BVI</a></li> 
    <li><a href="#" data-page="page4">The Grenadines</a></li> 
    <li><a href="#" data-page="page5">St. Lucia</a></li> 
  </ul>
</div>

这是脚本

<script type="text/javascript"> 
$(document).ready( function() {

var curPage="";

   $("#menu a").click(function() {
     $(".content").hide();

        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).fadeIn(1000);
    });

 });
</script>

我需要有关 "View All" link 的帮助。导航过滤我想单独查看的内容，但我想在单击 "view all" link 时显示所有 div(s)。

Answer 1

只需在你的js中添加如下代码，

if(curPage=='showall')
    $(".content").fadeIn(1000);

这将显示所有 content class div。

检查以下代码片段。

$(document).ready( function() {

var curPage="";

   $("#menu a").click(function() {
     $(".content").hide();

        if (curPage.length) { 
            $("#"+curPage).hide();
        }
        curPage=$(this).data("page");
        $("#"+curPage).fadeIn(1000);
  if(curPage=='showall')
   $(".content").fadeIn(1000);
    });

 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <ul class="nav navbar-nav" id="menu">
    <li><a href="#" data-page="showall">View All</a></li>
    <li><a href="#" data-page="page1">Antigua</a></li>
    <li><a href="#" data-page="page2">Barbados</a></li>
  </ul>
</div>


<div class="content" id="page1">
Hello
</div>
<div class="content" id="page2">
World
</div>

显示 DIV(s) 对应于 link 单击并显示 ( ) 所有 DIV(s) 当 "view all" link 被单击

Show DIV(s) corresponding to the link clicked and show( ) all DIV(s) when "view all" link is clicked

html

jquery

click