也许这是一种非常不好的方式,只适用于懒人,但我决定说出来。
我使用了PHP、Bootstrap和Font Awesome。
简单来说,我有两个页面:1.首页和2.创建用户。
将此代码放在您的代码之上。
<?php
$name=basename($_SERVER["REQUEST_URI"]);
$name=str_replace(".php","",$name);
switch ($name) {
case "create-user":
$a = 2;
break;
case "index":
$a = 1;
break;
default:
$a=1;
}
?>
在菜单中,您需要在menu1的class中添加
<?php if($a==1){echo "active";} ?>
,对于menu2,您需要添加
<?php if($a==2){echo "active";} ?>
。请保留HTML标签。
<ul id="menu" class="navbar-nav flex-column text-right mt-3 p-1">
<li class="nav-item mb-2">
<a href="index.php" class="nav-link text-white customlihamid <?php if($a==1){echo "active";} ?>"><i
class="fas fa-home fa-lg text-light ml-3"></i>dashbord</a>
</li>
<li class="nav-item mb-2">
<a href="#" href="javascript:" data-parent="#menu" data-toggle="collapse"
class="accordion-toggle nav-link text-white customlihamid <?php if($a==2){echo "active";} ?>" data-target="#tickets">
<i class="fas fa-user fa-lg text-light ml-3"></i>manage users
<span class="float-left"><i class="fas fa-angle-down"></i></span>
</a>
<ul class="collapse list-unstyled mt-2 mr-1 pr-2" id="tickets">
<li class="nav-item mb-2">
<a href="create-user.php" class="nav-link text-white customlihamid"><i class="fas fa-user-plus fa-lg text-light ml-3"></i>add user</a>
</li>
<li class="nav-item mb-2">
<a href="#" class="nav-link text-white customlihamid"><i class="fas fa-user-times fa-lg text-light ml-3"></i>delete user</a>
</li>
</ul>
</li>
</ul>
并添加CSS样式
.customlihamid {
transition: all .4s;
}
.customlihamid:hover {
background-color: #8a8a8a;
border-radius: 5px;
color: #00cc99;
}
.nav-item > .nav-link.active {
background-color: #00cc99;
border-radius: 7px;
box-shadow: 5px 7px 10px #111;
transition: all .3s;
}
.nav-item > .nav-link.active:hover {
background-color: #8eccc1;
border-radius: 7px;
box-shadow: 5px 7px 20px #111;
transform: translateY(-1px);
}
and in js add
$(document).ready(function () {
$('.navbar-nav .nav-link').click(function(){
$('.navbar-nav .nav-link').removeClass('active');
$(this).addClass('active');
})
});
首先在没有 JavaScript 代码的情况下检查您的工作,以了解 JavaScript 代码的用途。
<div>
中而不是<body>
标签中? - kaynewilderaria-page=current
属性而不是类。这是因为 CSS 类不能告诉浏览器哪个页面是活动的。这种解决方案有利于使用辅助技术的人,例如使用屏幕阅读器的低视力人群。很多人通过 Stack Overflow 学习编码,如果我们在这些示例中使用最佳实践,网络将变得更加无障碍。 - Pepijn Gieles