Question

我想要发生什么

我的链接有悬停效果。如何在单击/激活链接时保持效果？
然后，当您点击新链接时，我希望之前的悬停效果消失，直到再次点击。

我希望有人能够帮助解决问题，因此我可以启动并运行我的网站：）

HTML

<body>
    <div id="wrapper">

        <div id="menu">


            <nav id="navigation" class="site-navigation" role="navigation">
                <ul class="menu">
                    <li class="menu-item"><a href="#">Home</a></li>
                    <li class="menu-item"><a href="#">Overvågning</a>
                        <ul class="dropdown">
                            <li class="menu-item sub-menu"><a href="proddigi.aspx">Digital</a></li>
                            <li class="menu-item sub-menu"><a href="prod-analog.aspx">Analog</a></li>

                        </ul>
                    </li>
                    <li class="menu-item"><a href="#">Alarm</a></li>
                    <li class="menu-item"><a href="#">Kontakt</a></li>

                </ul>
            </nav>
        </div>



        <form id="form1" runat="server">
            <div>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </div>
        </form>
    </div>
</body>

CSS

body {
}
.site-navigation {
    display: block;
    font-family: 'Helvetica Neue LT Pro',Verdana;
    font-size: 13px;
}

    .site-navigation ul {
        background: #3498DB;
        list-style: none;
        margin: 0;
        padding-left: 0;
    }

    .content-place
    {
       padding-top:400px;
    }

    .site-navigation li {
        color: #fff;
        background: #112d3b;
        display: block;
        float: left;
        margin: 0 0 0 0;
        padding: 25px 18px;
        position: relative;
        text-decoration: none;
        text-transform: uppercase;
    }
        /* texten i menuen*/
        .site-navigation li a {
            color: #fff;
            text-decoration: none;
            display: block;
            height: 33px;
            position: relative;
            display:table-cell;
            vertical-align:middle;
        }
        /* hover menuen - Det der sker når man holder musen over menuen */
        .site-navigation li:hover {
            @include transition(background, 0.2s);
            background: #1e495f; /* farve på hover*/
            cursor: pointer;
            border-bottom: 3px solid red;
        }

    .site-navigation ul li ul {
        background: #112d3b;
        visibility: hidden;
        float: left;
        width: 50px;
        position: absolute;
        transition: visibility 0.1s ease-in;
        margin-top: 25px;
        left: 0;
        z-index: 999;
    }

        .site-navigation ul li:hover > ul,
        .site-navigation ul li ul:hover {
            visibility: visible;
            z-index: 999;
        }
        /* Drop down Menuen */
        .site-navigation ul li ul li {
            clear: both;
            padding: 5px 0 5px 18px;
            width: 111px;
            height:auto;
            z-index: 999;



        }

            .site-navigation ul li ul li:hover {
                background: #1e495f;
                z-index: 999;
            }

Answer 1

你可以用这样的jQuery做到这一点：

$('.site-navigation li a').click(function() {
    $('.site-navigation li a').removeClass('active');
    $(this).addClass('active');
});

然后只需将.active类定义为与悬停类相同。

Answer 2

我只需改变班级的颜色。当前它运作顺利

链接处于活动状态时保持悬停效果

2 个答案: