在css中class=“active”啥意思？

Posted 2023-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在css中class=“active”啥意思？相关的知识，希望对你有一定的参考价值。

class说明是一个类，class=“active”本身这句是html代码，如果在css里设置样式应该在类名前加个点，如.active，从经验看，active这个类一般用在导航条中当前高亮的栏目，或者选项卡中当前活动着的选项追问

class=“active”中的active是自定义的还是系统默认的

追答

自定义的

参考技术A active在这里是一个自定义的样式的名，这种样式称为类选择器，应该定义为以下形式：
<style type="text/css">

</style> 参考技术B HTML中class="active"，调用CSS中做好的active样式。参考技术C 调用激活时的样式，一般用在导航，JS动态加载追问

class=“active”中的active是自定义的还是系统默认的

追答

自定义的，在CSS里可以自己写，用active只是为了修改方便好识别，你可以谁便用其它的名，只要你认得就行

参考技术D 譬如：
<html>
<head><title></title>
<link href="CSS.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="active"></div>
</body>
</html>

CSS.css文件中
.active 写上所需要设置的样式属性

HTML中<div class="active"></div>(HTML中的人以标签都可以)，当然你也可以直接在html中写也可以

如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加啥

【中文标题】如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加啥【英文标题】：what do I put in className if I am using CSS module with .active property如果我使用带有 .active 属性的 CSS 模块，我应该在 className 中添加什么 【发布时间】：2021-10-18 19:05:38 【问题描述】：

每当我在导航栏中的状态发生变化时，我希望 NavItems 的背景在它为 false 时是透明的，并在它为 true 时添加渐变背景。

我知道如果是普通的 CSS，我可以将 'NavItems active' 作为我的 className 和 ?operator 用于 if 语句，但是我该如何使用 CSS 模块呢？

index.module.css

.NavItems
    background: transparent !important;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-weight: bold;
    position: sticky;
    top:0;
    z-index:300;


.NavItems.active
    background: linear-gradient(90deg, rgb(61,49,49) 0%, rgba(49,49,49,1)100%) !important;

index.jsx

return (
            <nav className=navbar ? styles.active : styles.NavItems>
                <div> 
                    <Link to='/'>
                    <img className=styles.NavLogo src=logo alt='LaoMa Logo'/>
                    </Link>
                </div>
                <div className=styles.menu_icon onClick=handleClick>
                    <i className=click ? 'fas fa-times' : 'fas fa-bars'>
                    </i>
                </div>
                <ul className=click ? styles.nav_menu.active : styles.nav_menu>
                    NavItems.map((item, index)=> 
                        return (
                            <li key=index>
                                    <Link onClick=closeMobileMenu className=styles[item.cName] to=item.url>
                                        item.title
                                    </Link>
                            </li>
                        )
                    )
                </ul>
            </nav>

        );

【问题讨论】：

【参考方案1】：

编辑：正如 andy 所说，我提供的第一个解决方案可能会导致奇怪的错误，因此使用像 https://www.npmjs.com/package/clsx 这样的包更聪明（就像 debuchet 建议的那样）

第一个解决方案：

className=`$navbar && styles.active $styles.NavItems`

然后在你的 css 中

.NavItems
    background: transparent !important;
    height: 100px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size: 1.5rem;
    font-weight: bold;
    position: sticky;
    top:0;
    z-index:300;


.active 
    background: linear-gradient(90deg, rgb(61,49,49) 0%, rgba(49,49,49,1)100%) !important;

【讨论】：

那行不通。你的意思是navbar 而不是active 这里的className=`$active && styles.active $styles.NavItems`？我使用钩子将状态设置为真或假，具体取决于值window.scrollY 是的，对不起，我更新了。现在可以用了吗？这应该对你有很大帮助:) npmjs.com/package/clsx 使用&& 的问题是它会返回一个值，该值最终可以作为类名添加，请参阅此处了解更多***.com/questions/50377147/…，因此虽然它“有效”，但它也可以导致到奇怪的错误 @andymccullough 不知道，谢谢

以上是关于在css中class=“active”啥意思？的主要内容，如果未能解决你的问题，请参考以下文章

在CSS中#wrap #header #navigation .active a:visited, active是啥意思

在DW,CSS样式中link，visited，hover，active这四个分别表示啥意思？

css 中的class是啥意思!

css样式中a:visited a:active 能帮我解释一下这是啥意思吗？

css 中的class是啥意思!