如何让 class="selected" 取决于当前页面/url 是什么答案

【问题标题】：How to have the class="selected" depending on what the current page/url is如何让 class="selected" 取决于当前页面/url 是什么
【发布时间】：2013-03-24 09:18:34
【问题描述】：

这是我的第一篇文章，请原谅，因为我是网络开发领域的新手。

通常，当我尝试制作网站时，我会创建一个名为 header.html 和 footer.html 的文件，这样我只在所有页面中更改一次数据，而不是在许多 html 文件中使用多个相同的标题。并将它们与每页的内容和 php 代码一起包含在一个 php 文件中。

现在我的问题是因为我只有 1 个标题，css 的设计方式是，无论当前菜单/选项卡是什么，它都会被标记为“已选择”，这样用户就可以清楚地看到他们当前所在的页面在。

我的问题是如何解决这个问题：

1.) 拥有 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--!>

谢谢你:)

【问题讨论】：

标签： php javascript css html

【解决方案1】：

如果您正在寻找非 javascript / php 方法...

首先，您需要确定应该将哪个导航链接设置为活动状态，然后添加 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，如果它匹配当前正在呈现的页面，则输出 selected 类

<?php
function echoSelectedClassIfRequestMatches($requestUri)
{
    $current_file_name = basename($_SERVER['REQUEST_URI'], ".php");

    if ($current_file_name == $requestUri)
        echo 'class="selected"';
}
?>

【讨论】：

+1 用于封装标头中的所有代码并提供非 JavaScript 方法。
@Chris Moutray 天哪！谢谢你:)，真的很有帮助！我创建了一个名为 config.php 的新包含文件并包含了此代码。它解决了我的问题。我总是发现 stackoverflow 是一个非常有帮助的社区：) 再次感谢大家。
太棒了，伙计。谢谢。

【解决方案2】：

您可以通过简单的 if 和 PHP 页面/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>

【讨论】：

【解决方案3】：

对不起，我的英语不好，但它可能会有所帮助。您可以使用 jQuery 来完成此任务。为此，您需要将页面 url 与菜单的锚点相匹配，然后添加选择的类。例如 jQuery 代码将是

    jQuery('[href='+currentURL+']').addClass('selected');

【讨论】：

【解决方案4】：

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 来根据您所在的页面定位其他内容。例如，您可以使用更多 CSS 将 index.php 页面上的所有 h1 元素变为红色：

 .index h1 { color: red; }

【讨论】：

感谢您提供后续信息 :) 真的很有帮助，因为我以前从来不知道这一点。我将在我当前的项目中尝试这个。 :)

【解决方案5】：

给每个链接一个单独的 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>

在服务页面上：

$(document).ready(function(){
    $("#services").addClass("selected");
});

或者甚至更好，正如 robertc 在 cmets 中指出的那样，甚至不需要为 id 烦恼，只需将 jquery 设为：

$(document).ready(function(){
    $("[href='services.php']").addClass("selected");
});

【讨论】：

无需乱用 ID：$("[href='services.php']").addClass("selected");
好点，从来没有真正想过这一点，我自己对 jQuery 还是有点陌生。我会添加它作为一个选项，谢谢。

【解决方案6】：

您可以识别每个链接并使用 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");
});

您可以使用的另一种方法是：

Add class element based on the name of the page

【讨论】：