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>

我需要帮助＆＃34;查看全部＆＃34;链接。导航过滤我想要单独查看的内容，但是当我点击＆＃34;查看全部＆＃34;时，我想显示所有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>

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

1 个答案: