Question

我正在使用Tumblr博客模板，其中我需要区分处于折叠和展开状态的博客文章/帖子。具体来说，我正在尝试应用CSS属性（用于边框），该属性必须仅在博客帖子显示在折叠状态的网格中时才应用，并且当访问者选择博客进一步阅读时不得应用。

这是我对模板所做的更改：

    div.posts-holder article:hover
    {
        border: 1px #BDBDBD solid;
        box-shadow: 7px 7px 3px #D8D8D8;
    }

另外，这就是div.posts-holder的样子（不是完整的代码，只是一个片段来提供一个想法）

<section class="the-posts">

    <div class="posts-holder
    {block:IndexPage} posts-grid{/block:IndexPage}">


        {block:IndexPage}<div class="grid-sizer"></div>{/block:IndexPage}


        {block:Posts}

        <article id="{PostID}" class="type_{PostType} {TagsAsClasses}" rel="{ReblogURL}">

            <div class="article-content">

这是我创建的虚拟博客的链接，用于说明问题： Example Blog Link 观察到，在悬停时，每个博客帖子都会出现阴影边框。一旦我真正阅读其中一篇帖子，我就不需要这个。

如何使用JavaScript或任何其他技术执行此操作？有没有办法可以找到帖子的状态？

Answer 1

通过查看您的示例页面，posts-holder div在网格页面上也有一个posts-grid类，但它不会显示只显示一篇文章的页面。所以你只需要改变你的CSS悬停规则

div.posts-holder article:hover

到

div.posts-holder.posts-grid article:hover

这样，它只会在文章进入网格时应用于文章。

Answer 2

这里是问题主要标题的答案：

如何识别是否已选择博客帖子？

这可以通过制作一个对象来实现......只需看看这段代码：

<强> HTML

   <div id="article1" onclick="selected("article1")"> </div>

<强>的Javascript

   var click= {};
    var selected = function(a){


          click[a] = "selected";
}

所以当你想要知道如果选择了这个div时，只需检查click对象中是否存在名为article1的属性，如果是，则执行其他操作然后不要< / p>

如何识别是否已选择博客文章？

2 个答案: