Question

我有2个html文件：

的index.html
portfolio.html

在portfolio.html中，我有4个类别的工作：网络，3D，代码和视频。此外，我还包含了一个过滤器脚本，该脚本仅显示所选类别的工作，并且它正在工作。

在index.html中，我需要有链接指向我的投资组合的每个类别，但我不知道如何做到这一点。

以下是代码：

的index.html：

...
<a href="portfolio.html#web"><img src="img/web.png"></a>
<a href="portfolio.html#triD"><img src="img/triD.png"></a>
<a href="portfolio.html#codes"><img src="img/codes.png"></a>
<a href="portfolio.html#video"><img src="img/video.png"></a>
...

Portfolio.html：

...
<!-- filter goes here: -->
<p id="picker">
    <a href="#" id="all" class="current" name="all">All</a> | 
    <a href="#" id="web" class="filter" name="web">Web</a> | 
    <a href="#" id="triD" class="filter" name="triD">3D</a> | 
    <a href="#" id="codes" class="filter" name="codes">Codes</a> | 
    <a href="#" id="video" class="filter" name="video">Video</a>
</p>

<!-- my work goes here: -->
<div class="my-work codes">...</div>
<div class="my-work web">...</div>
<div class="my-work triD">...</div>
<div class="my-work codes">...</div>
...

Filter.js：

$(function()
{   
   $("#all").click(function(){
       $(".my-work").slideDown();
       $("#catpicker a").removeClass("current");
       $(this).addClass("current");
       return false;
   });

   $(".filter").click(function(){
        var thisFilter = $(this).attr("id");
        $(".my-work").slideUp();
        $("."+ thisFilter).slideDown();
        $("#catpicker a").removeClass("current");
        $(this).addClass("current");
        return false;
   });

});

Answer 1

其实我找到了问题的正确答案。在portfolio.html中，在标题中的所有脚本之后，应添加以下脚本：

$(document).ready(function()
{
    var type = window.location.hash;
    //window.location.hash = window.location.hash.replace(type,''); //should be added if you want to remove: ...#class in address bar
    $(type).trigger('click');
});

从外部html文件执行链接

1 个答案: