这是我的第一篇文章，所以请原谅，因为我是web开发领域的新手。
通常，当我尝试制作一个网站时，我创建一个名为header.html和footer.html的文件，这样我只在所有页面中更改一次数据，而不是在许多html文件上有多个相同的标题。并将它们与每页的内容和php代码一起包含在一个php文件中。
现在我的问题是，因为我只有一个标题，css的设计方式，无论当前菜单/选项卡是，它将被标记为"选定"，以便其明显的用户什么页面，他们目前在。
我的问题是如何解决这个问题:
1)。根据当前页面/url设置class="selected"
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li><a href="index.php" class="selected">Home</a></li>
<li><a href="about.php">About</a> </li>
<li><a href="services.php">Services</a> </li>
<li><a href="features.php">Features</a></li>
<li><a href="#">Support</a>
<ul>
<li><a href="support1.php">Support 1</a></li>
<li><a href="support2.php">Support 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Menu Ends--!>
谢谢你
如果你正在寻找一个非javascript/php的方法…
首先需要确定应该将哪个nav-link设置为活动，然后添加selected类。代码看起来像这样
php文件中的HTML
在超链接<a>标记中调用内联的php函数，传递链接的目标请求uri
<ul>
<li><a href="index.php" <?=echoSelectedClassIfRequestMatches("index")?>>Home</a></li>
<li><a href="about.php" <?=echoSelectedClassIfRequestMatches("about")?>>About</a> </li>
<li><a href="services.php" <?=echoSelectedClassIfRequestMatches("services")?>>Services</a> </li>
<li><a href="features.php" <?=echoSelectedClassIfRequestMatches("features")?>>Features</a></li>
<li><a href="#">Support</a>
<ul>
<li><a href="support1.php" <?=echoSelectedClassIfRequestMatches("support1")?>>Support 1</a></li>
<li><a href="support2.php" <?=echoSelectedClassIfRequestMatches("support2")?>>Support 2</a></li>
</ul>
</li>
</ul>
PHP函数
php函数只需要比较传入的请求uri，如果它与正在呈现的当前页面匹配，则输出选择的类
<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
$current_file_name = basename($_SERVER['REQUEST_URI'], ".php");
if ($current_file_name == $requestUri)
echo 'class="selected"';
}
?>
您可以标识每个链接，并使用JavaScript/Jquery将selected类添加到相应的链接。
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li id="home-page"><a href="index.php" class="selected">Home</a></li>
<li id="about-page"><a href="about.php">About</a> </li>
<li id="services-page"><a href="services.php">Services</a> </li>
<li id="features-page"><a href="features.php">Features</a></li>
<li id="support-page"><a href="#">Support</a>
<ul>
<li id="support1-page"><a href="support1.php">Support 1</a></li>
<li id="support2-page"><a href="support2.php">Support 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- Menu Ends--!>
在你的内容页上使用jQuery做一些类似的事情:
$(document).ready(function(){
$("#features-page").addClass("selected");
});
你可以使用的另一个方法是:
根据页面名称添加class元素
给每个链接一个单独的id，然后在单独的页面上使用jQuery。
<li><a href="index.php" id="home">Home</a></li>
<li><a href="about.php" id="about">About</a> </li>
<li><a href="services.php" id="services">Services</a> </li>
<li><a href="features.php" id="features">Features</a></li>
<li><a href="#" id="support">Support</a>
<ul>
<li><a href="support1.php">Support 1</a></li>
<li><a href="support2.php">Support 2</a></li>
</ul>
</li>
在services页面:
$(document).ready(function(){
$("#services").addClass("selected");
});
或者更棒的是，就像robertc在评论中指出的那样，没有必要为id操心，只要让jquery这样:
$(document).ready(function(){
$("[href='services.php']").addClass("selected");
});
Chris方法的一个变体是输出一个特定的类来标识页面，例如在body元素上，然后在菜单项上使用固定的类，并使用一个CSS规则来匹配它们。例如，这个页面:
<DOCTYPE HTML>
<head>
<title>I'm the about page</title>
<style type="text/css">
.about .about,
.index .index,
.services .services,
.features .features {
font-weight: bold;
}
</style>
</head>
<body class="<?php echo basename(__FILE__, ".php"); ?>">
This is a menu:
<ul>
<li><a href="index.php" class="index">Home</a></li>
<li><a href="about.php" class="about">About</a> </li>
<li><a href="services.php" class="services">Services</a> </li>
<li><a href="features.php" class="features">Features</a></li>
</ul>
</body>
…是相当轻的动态代码，但应该达到目标;如果你把它保存为" About .php"，那么About链接将被粗体显示，但是如果你把它保存为" Services .php"，那么Services链接将被粗体显示，等等。
如果您的代码结构适合它，您可以简单地在页面的模板文件中硬编码页面的body类，而不是为它使用任何动态代码。这种方法有效地为您提供了一种将菜单系统的"逻辑"从菜单代码中移出的方法，菜单代码对于每个页面都将始终保持相同，并且一直到更高的级别。
作为一个额外的好处，您现在可以使用纯CSS根据您所在的页面来定位其他内容。例如，您可以将index.php页面上的所有h1元素变为红色，只需使用更多的CSS:
.index h1 { color: red; }
您可以通过简单的if和PHP page/basename()函数来实现。
<!--Menu Starts-->
<div class="menu">
<div id="smoothmenu" class="ddsmoothmenu">
<ul>
<li><a href="index.php" <?php if (basename($_SERVER['PHP_SELF']) == "index.php") { ?> class="selected" <?php } ?>>Home</a></li>
<li><a href="about.php" <?php if (basename($_SERVER['PHP_SELF']) == "about.php") { ?> class="selected" <?php } ?>>About</a> </li>
<li><a href="services.php" <?php if (basename($_SERVER['PHP_SELF']) == "services.php") { ?> class="selected" <?php } ?>>Services</a> </li>
<li><a href="features.php" <?php if (basename($_SERVER['PHP_SELF']) == "features.php") { ?> class="selected" <?php } ?>>Features</a></li>
</ul>
</div>
</div>
很抱歉我的英语不好，但也许它可以帮助。您可以使用jQuery完成此任务。为此，您需要将页面url与菜单的锚点相匹配，然后向其添加所选的类。例如，jQuery代码应该是
jQuery('[href='+currentURL+']').addClass('selected');