Question

我有一个菜单，我试图将活动页面链接设置为单击后更改样式。

HTML：

<div style="width: 270px; float: left;">
    <span class="trowDark">
        <a href="index.php" title="Home"><span class="headerBtnMenu"><i class="fa fa-home"></i></span><p>Home</p></a>
    </span>

    <span class="trowDark">
         <a href="list_emp.php" title="Employee List"><span class="headerBtnMenu"><i class="fa fa-users"></i></span><p>Employees</p></a>
    </span>

    <span class="trowDark">
        <a href="list_doc.php" title="Document List"><span class="headerBtnMenu"><i class="fa fa-file"></i></span><p>Documents</p></a>
    </span>

    <span class="trowDark">
        <a href="list_cat.php" title="Document List"><span class="headerBtnMenu"><i class="fa fa-folder"></i></span><p>Categories</p></a>
    </span>

    <span class="trowDark">
        <a href="list_not.php" title="Document List"><span class="headerBtnMenu"><i class="fa fa-exclamation-circle"></i></span><p>Notifications</p></a>
    </span>
</div>

CSS：

.trowDark{
    font-size: 14px;
    color: #637a91;
    cursor: pointer;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;      
}

.trowDark a{
    padding: 15px 15px;
    box-sizing: border-box;
    background-color: #2C3E50;
    color: #637a91;
    display: block;
    height: auto;
    overflow: auto;
    border-left: 4px solid #2C3E50;
}


.trowDarkClicked a{
    padding: 15px 15px;
    box-sizing: border-box;
    background-color: #637a91;
    color: #fff;
    display: block;
    height: auto;
    overflow: auto;
    border-left: 4px solid #b7d04e;
}



.trowDark:hover a{
    padding: 15px 15px;
    box-sizing: border-box;
    background-color: #637a91;
    color: #fff;
    display: block;
    height: auto;
    overflow: auto;
    border-left: 4px solid #b7d04e;
}

使用Javascript：

<script>

$('.trowDark a').on("click", function () {
    $('.trowDarkClicked a').removeClass('trowDarkClicked a');
    $(this).addClass('trowDarkClicked a');
});

</script>

我正在尝试定位div .trowDarkClicked a，以便在点击后显示。这可能是因为此菜单位于名为sidebar.php的文件中，并且在新页面加载后删除了活动状态，但sidebar.php是一个常量页面？

Answer 1

这是预期的结果吗？

jfiddle：jsfiddle.net/omikey/fhr644pz /

ps我无法找到你的代码有问题，我只是稍微摆弄它。

一定要使用onready：

$(document).ready(function () {
    $('.trowDark').click(function (e) {
        e.preventDefault();
        $('.trowDarkClicked').removeClass('trowDarkClicked');
        $(this).toggleClass('trowDarkClicked');
    });
});

Answer 2

你能否使用伪类：active？

trowDark a：活跃{

}

活动页面链接失败

2 个答案: