Question

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

这是我菜单栏的代码

＆＃13;

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;
    }

＆＃13;

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

＆＃13;

Answer 1

试试这个脚本..

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

希望这会有所帮助..

Answer 2

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

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

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

Answer 3

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

您在主页，然后将$ active class设置如下。

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

现在在每个

上的公共头文件make条件如下： -

while (value != myInt) {
    System.out.println("Not yet! You entered: " + value + ". Make another guess");
    value = input.nextInt();
}
System.out.println("You discovered me!");

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

3 个答案: