0

我有一个显示所有项目的工作页面。我正在使用分类法根据单击的链接对结果进行分组和显示。总体目标是在显示过滤结果的同时保持单击的链接突出显示。如果用户点击Things，那么Things 会加粗，页面只会加载在WP 中归类为“Things”的结果。

html是这样的：

<div class="more">
    <a class="static" href="site/work">ALL</a>
    <a class="static" href="site/?type=Things">Things</a>
    <a class="static" href="site/?type=More Things">More Things</a>
    <a class="static" href="site/?type=Objects">Objects</a>
    <a class="static" href="site/?type=Goals">Goals</a>
    <a class="static" href="site/?type=Books">Books</a>
    <a class="static" href="site/?type=Drawings">Drawings</a>
    <a class="static" href="site/?type=Thoughts">Thoughts</a>
</div>

所以链接过滤了项目结果集。这是拉链接的WP循环：

<div class="more">
    <a class="static" href="<?php bloginfo('template_url'); ?>/work/">ALL</a>           
    <?php
    foreach ($tax_terms as $tax_term) {
    echo '<a class="static" href="' . esc_attr(get_term_link($tax_term, $taxonomy)) . '" title="' . sprintf( __( "View all posts in %s" ), $tax_term->name ) . '" ' . '>' . $tax_term->name.'</a>';
    } ?>
</div>

我已经设置了一些 Jquery，所以它显示了用户在哪个页面上。

$(function(){
    $("div.more a").forEach(function(i){
        var active = window.location.hash;

        if($(this).text() == active){
            $(this).trigger('click');
        }
    }); 
});

$("div.more a").on("click", function (event) {
   event.preventDefault();
  // Revert all to original state
  $("a.static")
    .removeClass("active")
    .addClass("static");
  // Set classes to clicked anchor
  $(this)
    .removeClass("static")
    .addClass("active");

  window.location.hash = $(this).text();
});

这就是问题出现的地方。为了保持向用户显示单击了哪个项目标题的类更改，我删除了页面重新加载选项。我仍然需要?type=通过 url 来获得新的过滤结果。有人建议这可以使用 Ajax 来完成。我不知道如何执行。

或者我可以使用 Jquery 来获取通过 url 传递的值并将其与链接匹配吗？

更新

让我简化一下。我想通过将<a>标签传递给一个名为 active 的类来向用户显示单击了哪个链接。

所以默认情况下，代码如下所示：

<div class="more">
        <a class="static" href="site/work">ALL</a>
        <a class="static" href="site/?type=Things">Things</a>
        <a class="static" href="site/?type=More Things">More Things</a>
        <a class="static" href="site/?type=Objects">Objects</a>
        <a class="static" href="site/?type=Goals">Goals</a>
        <a class="static" href="site/?type=Books">Books</a>
        <a class="static" href="site/?type=Drawings">Drawings</a>
        <a class="static" href="site/?type=Thoughts">Thoughts</a>
    </div>

但是当用户点击一个链接时，例如“Things”，代码如下所示：

<div class="more">
        <a class="active" href="site/work">ALL</a>
        <a class="static" href="site/?type=Things">Things</a>
        <a class="static" href="site/?type=More Things">More Things</a>
        <a class="static" href="site/?type=Objects">Objects</a>
        <a class="static" href="site/?type=Goals">Goals</a>
        <a class="static" href="site/?type=Books">Books</a>
        <a class="static" href="site/?type=Drawings">Drawings</a>
        <a class="static" href="site/?type=Thoughts">Thoughts</a>
    </div>

在大多数情况下，这可以通过 JQuery 解决

removeClass("static").addClass("active)

但是由于在传递新的 url 变量时页面正在重新加载，所以 addClass("active") 在页面重新加载后不会持续存在。

有针对这个的解决方法吗？

4

1 回答 1

1

您有两种解决方案：

  1. 加载下一页时，检查分类并使该导航项处于活动状态。在这种情况下，<a class="static<?php if (is_post_type_archive('Things')) { echo ' active'; } ?>" href="site/?type=Things">为导航中的每个项目使用和相似。注意我选择了is_post_type_archive 函数，但它可能会根据您的分类而有所不同。
  2. 使用 AJAX 加载页面内容并使用 jQuery 只需替换内容所在的容器 div。

这样的事情可能会有所帮助：

$("div.more a").on("click", function (event) {
    // prevent page reload
    event.preventDefault();
    // get the contents
    $.get(this.href, function (response) {
        // jquerify the response HTML string and find our replaceable area
        var result = $(response).find('#myContentDiv');
        // do the replace
        $('#myContentDiv').html(result);
    });
});

我希望这个信息对您有所帮助。#myContentDiv 应该是您拥有循环的地方。

于 2012-06-24T00:28:14.800 回答