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