用于两页设置

Question

以下是 html 两个页面的代码，其中我在一个页面中编写了数据过滤器 属性，我需要在其他html中应用页。我做的方式不起作用。

<div class="grid_12" id="category-nav">
<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html" class="current-cat" data-filter="rondvaart">Rondvaart</a></li>
    <li><a href="otherpage.html" data-filter="wandelingen">Wandelingen</a></li>
    <li><a href="otherpage.html" data-filter="rondleidingen">Rondleidingen</a></li>
    <li><a href="otherpage.html" data-filter="groepsarrangementen">Groepsarrangementen</a></li>
</ul>

HTML代码 otherpage.html

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

</article><!-- End article.post -->
<article class="post" data-cat="rondleidingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

<article class="post" data-cat="wandelingen">
<header>
    <p class="byline">Rondvaart</p>
    <h2>Binnendieze</h2>
</header><!-- End header -->

Javascript / Jquery 是：

var posts = $('.post');
posts.hide();

$( "#category li a" ).click(function() { 

    var customType = $( this ).data('filter'); 
    console.log(customType);
    console.log(posts.length); 

    posts
        .hide()
        .filter(function () {
            return $(this).data('cat') === customType;
        })
        .show();
});

Answer 1

您的问题是，您是重定向点击到otherpage.html，而没有任何有关您的数据过滤器的信息。在一页而不是两页中这样做更简单。检查这个小提琴

http://jsfiddle.net/ergec/kwPLp/

用于两页设置

首页仅限HTML，无javascript

<ul id="category" class="list-of-links centered">
    <li><a href="otherpage.html#rondvaart" class="current-cat" data-filter="">Rondvaart</a></li>
    <li><a href="otherpage.html#wandelingen" data-filter="">Wandelingen</a></li>
    <li><a href="otherpage.html#rondleidingen" data-filter="">Rondleidingen</a></li>
    <li><a href="otherpage.html#groepsarrangementen" data-filter="">Groepsarrangementen</a></li>
</ul>

第二页（otherpage.html）

<强> HTML

<article class="post" id="rondvaart">
    <header>
        <p class="byline">Rondvaart</p>
         <h2>rondvaart</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="wandelingen">
    <header>
        <p class="byline">wandelingen</p>
         <h2>wandelingen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="rondleidingen">
    <header>
        <p class="byline">rondleidingen</p>
         <h2>rondleidingen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->
<article class="post" id="groepsarrangementen">
    <header>
        <p class="byline">groepsarrangementen</p>
         <h2>groepsarrangementen</h2>

    </header>
    <!-- End header -->
</article>
<!-- End article.post -->

<强>的Javascript

var hash = window.location.hash;
hash = hash.split("#");
hash = hash[1];
var posts = $('.post');
posts.hide();
$("#" + hash ).show();

使用data-filter属性

1 个答案:

用于两页设置