如何让类=“选择”取决于当前页/ url是什么 [英] How to have the class="selected" depending on what the current page/url is

问题描述

这是我的第一篇文章，因为我只是新的在web开发的世界。

This is my first post so forgive as I am just new in the world of web development.

通常，当我尝试做一个网站，我创建一个文件称为header.html和footer.html，因此我只在所有页面中更改数据一次，而不是在许多html文件上有多个相同的标题。

Normally, when I try to make a website, I create a file called header.html and footer.html so that I only change data once in all of the pages rather than having multiple same headers on many html files. And include them all in a php file together with the content and the php codes that comes per page.

现在我的问题是因为我只有一个头，css是设计的方式，无论当前菜单/标签是什么，它将被标记为选择，使其显而易见的用户他们当前的页面。

Now my problem is because I only have 1 header, the css is designed in a way that whatever the current menu/tab is, it will be marked as "selected" so that its obvious to the user what page they are currently in.

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

My question is how do I solve this problem:

1。）有 class =selected当前页面/网址是什么。

1.) To have the class="selected" depending on what the current page/url is.

<!--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方法...

If you're looking for a non-javascript / php approach...

首先，您需要确定应使用哪个nav-设为有效，然后添加所选类。代码看起来像这样

First you need to determine which nav-link should be set as active and then add the selected class. The code would look something like this

php文件中的HTML

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

Call a php function inline within the hyperlink <a> markup passing in the links destination request 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，如果它匹配当前正在渲染的页面，则输出 类

The php function simply needs to compare the passed in request uri and if it matches the current page being rendered output the selected class

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

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

这篇关于如何让类=“选择”取决于当前页/ url是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！