如何将活动类添加到特定 div

Posted

技术标签:

【中文标题】如何将活动类添加到特定 div【英文标题】:how do you add an active class to a particular div 【发布时间】:2019-07-02 16:26:46 【问题描述】:
<newsfeed-view inline-template :newsfeed="  $feed ">
    <article class="bg-white p-8 w-1/2 mt-4 p-4" id="newsfeedPost" v-bind:class=" 'active' : isHighlighted  ">
        <h3>
            <a href="#" class="text-blue-dark hover:no-underline hover:text-black active:no-underline active:text-4xl" @click="this.isHighlighted = true">  $feed->newsfeed_title </a>
        </h3>
        <p class="mt-4"> $feed->body </p>
    </article>
</newsfeed-view>

这是我的风格部分

<style lang="scss" scoped>
.highlighted  
    @apply .border-l-4 .border-orange ;


#newsfeedPost  
    @apply .rounded-lg ; 



</style>

如果我单击该锚标记,我想添加突出显示的类..

【问题讨论】:

【参考方案1】:

您的v-bind:class=" 'active' : isHighlighted " 行将切换active 类。如果您想按照样式表中的指示切换 highlighted 类,请使用:

v-bind:class=" 'highlighted' : isHighlighted "

【讨论】:

以上是关于如何将活动类添加到特定 div的主要内容,如果未能解决你的问题,请参考以下文章

如何隐藏滚动间谍中的其他内容而不是滚动到特定位置

如何禁用来自循环的其他div,除了单击的div

如何将特定类添加到 select2 放置元素?

在标准jquery选项卡上将样式添加到活动选项卡

如何在 Android 地图活动中显示特定标记?

jQuery:如何让 div 扩展到一个高度并添加文本?