我有一个菜单,我试图在其中设置事件页面链接以在单击后更改样式。
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
是一个常量页面?
最佳答案
这是期望的结果吗?
jfiddle: jsfiddle.net/omikey/fhr644pz/
ps 我找不到你的代码有什么问题,我只是稍微摆弄了一下。
一定要使用onready:
$(document).ready(function () {
$('.trowDark').click(function (e) {
e.preventDefault();
$('.trowDarkClicked').removeClass('trowDarkClicked');
$(this).toggleClass('trowDarkClicked');
});
});
关于javascript - 事件页面链接失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30414961/