在我正在构建的导航栏中，悬停工作正常。但是当我点击一个按钮时，字体上的蓝色仍然是“hjem”。此刻“hjem”会调用一个名为“active”的类。我不太确定我是否可以用CSS解决这个问题，或者我必须为此制作一些JavaScript？
目前我的HTML标题如下所示：
<!-- header-container start -->
<div class="header-container">
<header class="header fixed clearfix">
<div class="container">
<div class="row">
<div class="col-md-3 ">
<!-- header-left start -->
<!-- ================ -->
<div class="header-left clearfix">
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons visible-xs">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
<!-- logo -->
<div id="logo" class="logo">
<a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php"><img id="logo_img" src="http://<?php echo $_SERVER['HTTP_HOST'] ?>/images/graphics/logo.png" alt=""></a>
</div>
</div>
<!-- header-left end -->
</div>
<div class="col-md-9">
<div class="main-navigation animated with-dropdown-buttons">
<!-- navbar start -->
<!-- ================ -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- Toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<!-- main-menu -->
<ul class="nav navbar-nav ">
<!-- mega-menu start -->
<li class="active mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST'] ?>/index.php">Hjem</a>
</li>
<!-- mega-menu end -->
<!-- mega-menu start -->
<li class="dropdown mega-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Kompetencer</a>
<ul class="dropdown-menu">
<li>
<div class="row">
<div class="col-lg-8 col-md-9">
<div class="row">
<div class="col-sm-4">
<h4 class="title">Design</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/ux-ui.php"><i class="fa fa-angle-right"></i>UX/UI</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/prototyping.php"><i class="fa fa-angle-right"></i>Prototyping</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/web-design.php"><i class="fa fa-angle-right"></i>Web Design</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/grafisk-design.php"><i class="fa fa-angle-right"></i>Grafisk Design</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Webudvikling</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/webudvikling.php"><i class="fa fa-angle-right"></i>Webudvikling</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/php-mysql.php"><i class="fa fa-angle-right"></i>PHP & MySQL databaser</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/wordpress.php"><i class="fa fa-angle-right"></i>Wordpress</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/umbraco.php"><i class="fa fa-angle-right"></i>Umbraco</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/joomla.php"><i class="fa fa-angle-right"></i>Joomla</a></li>
</ul>
</div>
<div class="col-sm-4">
<h4 class="title">Marketing Automation</h4>
<div class="divider"></div>
<ul class="menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/mautic.php"><i class="fa fa-angle-right"></i>Mautic</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/landeside.php"><i class="fa fa-angle-right"></i>Landesider</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 hidden-sm">
<h4 class="title">Oversigt over kompetencer</h4>
<p class="mb-10"><a href=" http://<?php echo $_SERVER['HTTP_HOST']?>/kompetencer/alle-kompetencer.php"><u>En oversigt over alle mine kompetencer</u></a></p>
<img src="http://<?php echo $_SERVER['HTTP_HOST']?>/images/graphics/kompetencer.png" alt="The Project">
</div>
</div>
</li>
</ul>
</li>
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/portfolio.php">Portfolio</a>
</li>
<!-- mega-menu end -->
<li class="dropdown ">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil</a>
<ul class="dropdown-menu">
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/uddannelse.php">Uddannelse</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/erhvervserfaring.php">Erhvervserfaring</a></li>
<li ><a href="http://<?php echo $_SERVER['HTTP_HOST']?>/personlighed.php">Personlighed</a></li>
</ul>
</li>
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/artikler-index.php">Artikler</a>
</li>
<!-- mega-menu start -->
<!-- mega-menu start -->
<li class="mega-menu">
<a href="http://<?php echo $_SERVER['HTTP_HOST']?>/kontakt.php">Kontakt</a>
</li>
</ul>
<!-- main-menu end -->
<!-- header dropdown buttons -->
<div class="header-dropdown-buttons hidden-xs ">
<div class="btn-group dropdown">
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i></button>
<ul class="dropdown-menu dropdown-menu-right dropdown-animation">
<li>
<form role="search" class="search-box margin-clear">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Search">
<i class="icon-search form-control-feedback"></i>
</div>
</form>
</li>
</ul>
</div>
</div>
<!-- header dropdown buttons end-->
</div>
</div>
</nav>
<!-- navbar end -->
</div>
<!-- main-navigation end -->
</div>
<!-- header-right end -->
</div>
</div>
</div>
</header>
<!-- header end -->
答案 0 :(得分：0)
啊好吧这根本不像我想的那么难。
<强> HTML
<body id="portfolio">
<a href="portfolio.php">Portfolio</a>
<强> navbar.js
$(function() {
$("#portfolio a:contains('Portfolio')").parent().addClass('active');
});
答案 1 :(得分：0)
好吧，你只需要用你的页面更改活动课程。
function set_active($path){
$a= explode('/', $_SERVER['SCRIPT_NAME']);
$page = array_pop($a);
if ($page == $path.'.php'){
return "active";
} else {
return "";
}
}
<li class="<?= set_active('profile'); ?>">
我正在努力帮助，我不是很好，但是当我想把我的菜单激活时，我会做这个功能。祝你好运：D