javascript - 事件页面链接失败

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');
    });
});