如何突出显示当前页面的菜单链接

how to highlight menu link of current page?

本文关键字：菜单 链接 当前页 何突出 显示      更新时间：2023-09-26

这是一个非常常见的问题，但我找不到任何解决方案。我正在做一个相当大的网站，有几百个页面，所以我创建了一个页眉和页脚，每个页面都是一样的。现在我想突出显示当前页面的菜单按钮，但我的菜单在标题中，我使用<?php include("header.php");?>将其包含在每个页面中，所以我尝试的所有操作都不起作用。我尝试过这种方法，但只有当每个页面中都有菜单代码时才有效（因此不使用php-include）。有什么建议吗？

这是我的菜单栏的代码

nav {
    height: 40px;
    background: black;
    border-radius: 0 0 10px 10px;
}
#navblock {
    margin-left: 160px;  
}
nav ul{
    list-style: none; 
    position: relative; 
    display: inline-table;
    }
nav ul li{ 
    float: left; 
    font-size: 20px;
    }
nav ul li:hover {
    background: #666;
    }
nav ul li:hover a {
    color: #fff;
    text-decoration: none;
    }
nav ul li a {
    display:block; 
    padding-top: 6px; 
    padding-left: 30px; 
    padding-right: 30px; 
    padding-bottom: 6px; 
    text-decoration: none;
    color: white;
    }
nav ul ul {
    display: none; 
    background: #101010; 
    padding: 5px 5px 5px 5px;
    width: auto;
    position: absolute; 
    z-index: 1;
    top: 40px;}
nav ul li:hover > ul {
    display:block;
    }
nav ul ul li {
    float: none; 
    position: relative; 
    font-size: 14px; 
    margin-left: 0px;
    }
nav ul ul li a:hover {
    background: #666;
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<nav>
    <div id="navblock">
        <ul>
            <li><a href="/index.html">Home</a></li>
            <li><a href="/anime/index.html">Anime</a>
                <ul>
                    <li><a href="/anime/listaepisodi.html">Lista episodi Anime</a></li>
                    <li><a href="/anime/episodio00.html">episodio00</a></li>
                </ul>
            </li>
            <li><a href="/serietv/index.html">Serie TV</a>
                <ul>
                    <li><a href="">Lista completa Serie TV</a></li>
                    <li><a href="">Cerca Anime</a></li>
                </ul>
            </li>
        </ul>
    </div>
    </nav>

试试这个脚本。。

var url = window.location;
$('a[href="'+url+'"]').parent('li').addClass('active');

希望这能有所帮助。。

您可以使用JavaScript突出显示当前页面。使用window.location.href，JavaScript会为您提供当前加载页面的url。因此，在窗口加载时，您可以这样做（假设安装了jQuery）：

var pg = window.location.href.substring(window.location.href.lastIndexOf("/"));
$("a[href=" + pg + "]").parent('li').addClass('active');

当然，这也是假设您确实预定义了一个名为active的css类，该类负责装饰活动链接！

你可以在你的PHP页面上做一件事，从PHP文件中获取一个$active类和一个sign值，我将用例子来解释你：-

您在主页上，然后只需设置$activeclass如下。

$active = "home";

现在，在公共头文件中，对每个

  • 设置条件，如下所示：- 
    <ul>
    <li class="<?php echo ($active == "home") ? "active" : ""; ?>"><a href="/index.html">Home</a></li>
    <li class="<?php echo ($active == "anime") ? "active" : ""; ?>"><a href="/anime/index.html">Anime</a>
        <ul>
            <li><a href="/anime/listaepisodi.html">Lista episodi Anime</a></li>
            <li><a href="/anime/episodio00.html">episodio00</a></li>
        </ul>
    </li>
    <li class="<?php echo ($active == "serietv") ? "active" : ""; ?>"><a href="/serietv/index.html">Serie TV</a>
        <ul>
            <li><a href="">Lista completa Serie TV</a></li>
            <li><a href="">Cerca Anime</a></li>
        </ul>
    </li>
</ul>
    • 相关文章：