javascript - Tumblr:如何使用帖子标记控制 CSS(更新:没有 JQuery 的工作方法!)

标签 javascript jquery css tumblr

以前看过这个,很好奇是怎么做到的。示例可以在 http://wordographic.info/ 找到

例如,如果我将帖子标记为蓝色,则帖子的 bg-color 会变为蓝色,等等。

有人知道这是怎么做到的吗?

谢谢。

最佳答案

找到了一种仅使用 HTML/CSS 来执行此操作的方法。非常简单,只需将 {Tag} block 添加到任何包裹帖子区域的 div 类,但要确保它位于 {block:Posts} 和 {block:Text} 等之间。现在无论你标记什么帖子现在都变成了一个新类。

{block:Posts}
  {block:Text}
    <div class="post {block:HasTags}{block:Tags}{Tag} {/block:Tags}{/block:HasTags}">
      {block:Title}<h2>{Title}</h2>{/block:Title}
      <p>{Body}</p>
    </div>
  {/block:Text}
{/block:Posts}

注意下面的第三行。在 {Tag} 之后添加一个空格很重要,否则它们将不会在 HTML 中被分隔。

CSS 看起来像这样:

.post { /* default style */
    background: #ccc;
    float: left;
    margin: 10px;
    position: relative;
    }
.blue { /* when tagged blue, use this style */
    background: blue !important; 
    }

有效!非常简单,不需要 jquery!

感谢 Blender,如果我没有阅读您的 jquery 方法,出于某种原因就不会想到这一点 :)

关于javascript - Tumblr:如何使用帖子标记控制 CSS(更新:没有 JQuery 的工作方法!),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6234607/

相关文章:

javascript - jquery Accordion 默认展开

javascript - 为什么 .ajaxComplete 必须附加到文档中?

javascript - 从复选框选择更改 AJAX jQuery url

javascript - jQuery/CSS 不同颜色的半圆进度条

javascript - 如何使用 JQUERY 为多个 DIVS 内的按钮编写 CLICK 函数

javascript - 如何制作粘性页脚,同时保持包装动态?

动画后CSS淡入不透明度重置

javascript - 我如何扩展这个 CSS 列表?

javascript - 是否可以从浏览器 javascript 降级 xss?

javascript - 将 "this"传递给 jQuery 中的函数问题