动态添加class名，改变标签样式（包含鼠标移入、移出及点击事件）

最新推荐文章于 2022-11-11 18:17:25 发布

@江清

最新推荐文章于 2022-11-11 18:17:25 发布

阅读量869

点赞数

文章标签： css html5 html

原文链接：https://blog.csdn.net/qq_41115965/article/details/79652485

版权

1、常用的适用场景：多个超链接标签之间，通过点击实现页面跳转。

2、具体代码：

<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                padding: 20px;
                margin: 0;
            }
            
            li {
                width: 60px;
                height: 10px;
                border-radius: 10px;
                list-style: none;
                text-align: center;
                line-height: 8px;
                font-size: 30px;
                margin-bottom: 10px;
            }
            /*鼠标移入样式改变*/
            li:hover {
                background-color: #2887f0;
                color: #fff;
            }
            /*添加class=“active”之后的样式*/
            .active {
                background-color: #2887f0;
                color: #fff;
            }
        </style>
    </head>
 
    <body>
        <ul>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
        </ul>
    </body>
 
</html>