在 tumblr 中使用标签链接的动态过滤栏答案

【问题标题】：Dynamic filter bar using tag links in tumblr在 tumblr 中使用标签链接的动态过滤栏
【发布时间】：2013-04-18 17:04:17
【问题描述】：

我有 10 个指向 10 个 TagPages 的链接，当单击它们时，它们会将您带到一个包含所有带有该标记的帖子的页面。

这很容易。

我想知道是否可以在一个页面中堆叠多个标记的帖子。例如，当所有带有“红色”标签的帖子都显示出来时，您可以在不离开页面的情况下点击并加载带有“蓝色”标签的帖子。

这 10 个链接的行为就像一个过滤系统。然后，您可以在一页中显示任何已标记帖子的组合...单击一次并加载它们，再次单击以隐藏帖子。

我希望一切都有意义。

任何帮助都会很棒。谢谢。

【问题讨论】：

标签： dynamic filter tags tumblr

【解决方案1】：

您可以使用 Tumblr 的 API 按标签加载帖子：http://www.tumblr.com/docs/en/api/v2#posts

每个标签的调用看起来像这样（方括号标记您需要更改的区域）：

URL = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=?

$.ajax(URL, {
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // do something with your data
  }
});

更新了一个更具体的例子：

您需要为每次点击标签导航创建一个函数。因此，假设您使用简单的 HTML 构建了导航，您希望为每次点击创建一个函数。

HMTL：

<nav class="tag-nav>
    <ul>
        <li><a href="/tagged/portrait" class="portrait">Portrait</a></li>
        <li><a href="/tagged/landscape" class="landscape">Landscape</a></li>
    </ul>
</nav>

JS：

$('.tag-nav a').on('click', function (e) {
    e.preventDefault();

    // grab classname from the link that was just clicked
    var tagName = $(this).attr('class');

    // go get our tagged posts
    getTaggedPosts(tagName);
});

var getTaggedPosts = function (tag) {
    // this is where your AJAX call will go

    // bonus points if you check to see if you've already made the AJAX call
    // and stored the posts somewhere else on the page
};

【讨论】：

感谢您回复我。这对于我的原始编码知识来说是相当先进的。我确实有点理解，但是我指向不同标签的链接在 html 中会是什么样子？
另外，有没有办法在点击后设置活动链接的样式。这是一个简单的 a:active 样式吗？
a:active 是实际点击链接的行为，与您当前导航到的位置无关。
用更具体的例子更新了我的答案。