0

私は2つのhtmlファイルを持っています：

  • index.html
  • Portfolio.html

Portfolio.htmlには、Web、3D、コード、ビデオの4つのカテゴリの作品があります。また、選択されて機能しているカテゴリの作業のみを表示するフィルタスクリプトを含めました。

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;
   });

});
4

1 に答える 1

0

実際、私は自分の質問の正しい答えを見つけました。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');
});
于 2012-04-25T18:04:28.350 に答える