Question

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

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

现在我的问题是因为我只有1个标题，css的设计方式无论当前菜单/标签是什么，它都会被标记为“已选中”，这样就可以向用户显示它们当前的页面in。

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

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--!>

谢谢你：）

Answer 1

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

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

php文件中的HTML

在链接目标请求uri中传递的超链接<a>标记内联调用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，如果它与正在渲染的当前页面匹配，则输出 selected 类

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

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

Answer 2

为每个链接指定一个单独的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");
});

或者甚至更好，正如罗伯特在评论中指出的那样，没有必要打扰这个id只是让jquery这个：

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

Answer 3

您可以为每个链接添加ID，并使用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

Answer 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”，则“关于”链接将为粗体，但如果将其保存为“services.php”，则“服务”链接将为粗体等。

如果您的代码结构适合它，您可以简单地在页面的模板文件中对页面的body类进行硬编码，而不是使用任何动态代码。这种方法有效地为您提供了一种方法，可以将菜单系统的“逻辑”移出菜单代码，菜单代码对于每个页面始终保持相同，并且更高级别。

作为额外的奖励，您现在可以使用纯CSS根据您所在的页面定位其他内容。例如，您可以使用更多CSS将h1页面上的所有index.php元素变为红色：

 .index h1 { color: red; }

Answer 5

你可以从简单的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>

Answer 6

抱歉我的英语不好，但可能会有所帮助。您可以使用jQuery执行此任务。为此，您需要将页面URL与菜单的锚点匹配，然后将选定的类添加到其中。例如，jQuery代码将是

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

如何使class =“selected”取决于当前页面/ url是什么

6 个答案: