9

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

通常，当我尝试创建一个网站时，我会创建一个名为 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--!>

谢谢你 ：）

4

6 回答 6

13

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

首先，您需要确定应将哪个导航链接设置为活动，然后添加所选类。代码看起来像这样

php文件中的HTML

<a>在传递链接目标请求 uri的超链接标记中内联调用 php 函数

<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"';
}
?>
于 2013-04-02T21:54:43.670 回答
1

给每个链接一个单独的 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 在评论中指出的那样，甚至不需要为 id 而烦恼，只需将 jquery 设为：

$(document).ready(function(){
    $("[href='services.php']").addClass("selected");
});
于 2013-04-02T21:48:28.470 回答
1

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

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

根据页面名称添加类元素

于 2013-04-02T21:50:36.380 回答
1

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 将页面h1上的所有元素变为index.php红色：

 .index h1 { color: red; }
于 2013-04-02T23:16:03.047 回答
1

您可以通过简单的 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>

于 2014-12-16T09:50:40.557 回答
0

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

    jQuery('[href='+currentURL+']').addClass('selected');
于 2014-10-03T10:27:18.613 回答