【问题标题】:How to select a currently open link in css?如何在css中选择当前打开的链接?
【发布时间】:2018-06-25 16:37:59
【问题描述】:

我有一个带有 3 个链接的菜单栏 (Home (class="h")Contact (class="c")About(class="A"))。现在主页已打开,所以我希望主页 (class="h") 链接的 background colorgreen,其他 2 个链接的 background colorblack

【问题讨论】:

标签: html css


【解决方案1】:

您可以使用简单的 Jquery 代码来执行此操作。在此处查看示例:https://codepen.io/Nacorga/pen/rKryYL

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>

<style type="text/css">

    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }

    ul {
        height: 60px;
        width: 100%;
    }

    li {
        float: left;
        width: 33.33333%;
        background: #000;
        height: 60px;
        list-style: none;
        text-align: center;
    }

    li:hover {
        cursor: pointer;
    }

    a {
        text-decoration: none;
        color: #fff;
        line-height: 60px;
    }

    .active {
        background-color: green; 
    }

</style>

<body>

    <ul>
        <li class="h">
            <a href="#">Home</a>
        </li>
        <li class="c">
            <a href="#">Contact</a>
        </li>
        <li class="a">
            <a href="#">About</a>
        </li>
    </ul>

    <!--SCRIPTS-->

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        let count = $('li').length;

        for (let i = 0; i< count; i++) {

            $($('li')[i]).click(function() {

                $('li').removeClass('active');
                $($('li')[i]).addClass('active');

            });

        }

    </script>

</body>
</html>

【讨论】:

    猜你喜欢
    • 2014-12-18
    • 2012-02-24
    • 2017-09-13
    • 1970-01-01
    • 1970-01-01
    • 2020-04-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多