显示与单击的链接相对应的DIV，并在单击“查看全部”链接时显示所有DIV。

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>

我需要“查看全部”链接的帮助。 导航过滤我要单独查看的内容，但是当我单击“查看全部”链接时，我也想显示所有div。

Answer 1

只需在您的js中添加以下代码，

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

这将显示所有content类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>