Question

我正在尝试创建一个脚本，当我单击导航链接时，检查哪个类附加到该特定链接，然后隐藏当前页面并显示也包含该特定类的页面。

这个脚本目前在2页之间切换，而不是检查带有类的页面，但我确信稍后添加（1行代码）会很简单。

(function () {
pages = ["home", "about", "portfolio", "misc", "inquire"];

//request = window.location.hash.substring(1);

//Finding page corresponding to clicked link
function SetRequest (link, pages)
{
    lookingFor =  ".home";

    for (var i in pages)
    {
        if (link.hasClass(("." + pages[i]).toString()))
        {
            lookingFor = pages[i];
        }
    }

    return ("." + lookingFor).toString();
}

//Hiding all other pages, showing page needed
function ShowCurrentPage (page, pages, lookingFor)
{
    for (var i in pages)
    {
        if (page.hasClass(lookingFor))
        {
            $(".page.current").animate({opacity: 0});
            $(".page.current").removeClass("current");
            $(".page").animate({opacity: 1});
            $(".page").addClass("current");
        }
    }
}

$(".nav-link a").click(function(){
    ShowCurrentPage($(this), pages, SetRequest($(this), pages));
});
})();

Answer 1

你不需要做一个循环。做这样的事情：

function switchPage(lookingFor)
{
    var lookingForDom = $('' + lookingFor); // I assume that lookingFor carries full selector either id or css based
    if (lookingForDom.length > 0) // We've found one
    {
        $(".page.current").removeClass("current").animate({opacity: 0});
        lookingForDom.addClass("current").animate({opacity: 1});
    }
}

还可以轻松获取所需的页面名称，只需将其保留在链接的某些属性中即可点击并回溯它。 Href是为这些东西设计的地方（但你需要在页面div上使用id）。所以js会是：

$('.nav-link a').click(function(){ switchPage($(this).attr('href')); });

还记得在$（document）.ready函数中注册你的事件，如下所示：

$(document).ready(function()
{
    $(".nav-link a").click(...);
});

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            function switchPage(lookingFor)
            {
                var lookingForDom = $('' + lookingFor); // I assume that lookingFor carries full selector either id or css based
                if (lookingForDom.length > 0) // We've found one
                {
                    $(".page.current").removeClass("current").animate({opacity: 0});
                    lookingForDom.addClass("current").animate({opacity: 1});
                }
            }

            $(document).ready(function()
            {
                // Initial switch to hide other pages
                $('.page').css({ opacity: 0 });
                switchPage('#pageA');

                $('.links a').click(function(){ switchPage($(this).attr('href')); });
            });
        </script>
    </head>
    <body>
        <div id="pageA" class="page">I'm page A</div>
        <div id="pageB" class="page">I'm page B</div>
        <div id="pageC" class="page">I'm page C</div>

        <ul class="links">
            <li><a href="#pageA">Go to page A</a></li>
            <li><a href="#pageB">Go to page B</a></li>
            <li><a href="#pageC">Go to page C</a></li>
        </ul>
    </body>
</html>

Answer 2

这是一个非常简单的代码：http://codepen.io/anon/pen/advjeN

html：

<nav class="nav-link">
  <a  class="aa" href="#">FIRST LINK</a> 
  <a class="bb" href="#">SECOND LINK</a> 
</nav>

<div class="pages">
<div class="aa page red"></div>


<div class="bb page blue hide"></div>
</div>

CSS：

.page{
  height: 200px;
  width: 200px; 
  margin : 20px;
  display: inline-block;
}
.red{ background-color: red;}
.blue{background-color: blue;}
.hide{ display: none;}

和jquery：

(function () {

$(".nav-link a").click(function(){
    var myclass = '.' + $(this).attr('class');
    $('.pages').children().hide();
    $(myclass).fadeIn();
});
})();

如果将它们全部放在“pages”div中，那么你可以轻松地隐藏它们，但是如果它们都至少有一个类似于所有你可以简单地做$（myclass）.hide（）;

jQuery页面淡入淡出脚本

2 个答案: