我有一个列表,这是在其他网页重用,所以我包括在一个文件,并要求在其他网页相同的要求
我想使它们处于活动状态,例如,如果单击了myresume,myresume的li将变为活动状态,而不是dashboard,因此我在同一个文件中实现jquery,但每次单击dashboard以外的其他链接时,活动类只出现在dashboard l中。 是因为每次我去其他页面时,活动类都出现在仪表板上,还是因为jquery代码(我包含了jquery的cdn)?
.active {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="active"><a href="dashboard.php"><i class="ti-dashboard"></i>Dashboard</a></li>
<li><a href="resume.php"><i class="ti-wallet"></i>My Resume</a></li>
<li><a href="employer-list.php"><i class="ti-wallet"></i>Browse Jobs</a></li>
<li><a href="assess.php?q=1"><i class="ti-wallet"></i>Assessment</a></li>
<li><a href="jobs.php"><i class="ti-hand-point-right"></i>Applied Jobs</a></li>
</ul>
我想要的是,我的li在我的页面加载后,而不是在点击后,才会激活
$(document).ready(function() {
$("li").click(function() {
// remove classes from all
$("li").removeClass("active");
// add class to the one we clicked
$(this).addClass("active");
});
});
尝试一下,给出你的url名称作为所有li的类名,如下所示
<ul>
<li class="dashboard"><a href="dashboard.php"><i class="ti-dashboard"></i>Dashboard</a></li>
<li class="resume"><a href="resume.php"><i class="ti-wallet"></i>My Resume</a></li>
<li class="employer-list"><a href="employer-list.php"><i class="ti-wallet"></i>Browse Jobs</a></li>
<li class="assess"><a href="assess.php?q=1"><i class="ti-wallet"></i>Assessment</a></li>
<li class="jobs"><a href="jobs.php"><i class="ti-hand-point-right"></i>Applied Jobs</a></li>
</ul>
然后按如下所示更改jQuery,逻辑是,从url将获得您为每个li提供的类名,并相应地分配活动类。
$(document).ready(function() {
var relativePath = location.pathname.split("/");
var activeMenu = relativePath[relativePath.length-1].replace(".php", "")[0];
$('li.'+activeMenu).addClass("active");
});