活動頁面鏈接失敗

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刪除了活動狀態，但是sidebar.php是恆定頁面嗎？

Answer 1

這是理想的結果嗎？

jfiddle：jsfiddle.net/omikey/fhr644pz/

ps我找不到您的代碼有問題的地方，我只是擺弄了一下。

確保使用現成的：

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

Answer 2

您不能使用偽類：active嗎？

trowDark a：active {

}