如何突出显示当前页面的菜单链接？ [英] how to highlight menu link of current page?

问题描述

这是一个非常普遍的问题，但我找不到解决方案。
我制作了一个包含数百页的漂亮的大网站，所以我创建了页眉和页脚页面，这些页面在每个页面中都是相同的。现在我想突出显示当前页面的菜单按钮，但是我的菜单位于使用<？php include（header.php）;？> 所以我尝试的一切都不起作用。
i尝试了这种方法但只有在每个页面都有菜单代码时才能使用（所以不使用php include）。
有什么建议吗？

这是我菜单栏的代码

snippetdata-lang =jsdata-hide =false>

nav {height：40px;背景：黑色; border-radius：0 0 10px 10px;}＃navblock {margin-left：160px; } nav ul {list-style：none;位置：相对;显示：内联表; } nav ul li {float：left; font-size：20px; } nav ul li：hover {background：＃666; } nav ul li：hover a {color：#fff;文字修饰：无; } nav ul li a {display：block; padding-top：6px; padding-left：30px; padding-right：30px; padding-bottom：6px;文字修饰：无;白颜色; } nav ul ul {display：none;背景：＃101010; padding：5px 5px 5px 5px;宽度：自动;位置：绝对; z-index：1; top：40px;} nav ul li：hover> ul {display：block; } nav ul ul li {float：none;位置：相对; font-size：14px; margin-left：0px; } nav ul ul li a：hover {background：＃666; }

< link rel =stylesheethref = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\"><nav> < div id =navblock> < UL> < li>< a href =/ index.html>主页< / a>< / li> < li>< a href =/ anime / index.html>动漫< / a> < UL> < li>< a href =/ anime / listaepisodi.html> Lista episodi Anime< / a>< / li> < li>< a href =/ anime / episodio00.html> episodio00< / a>< / li> < / UL> < /锂> < 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> < /锂> < / UL> < / DIV> < / nav>

解决方案

试试这个脚本..

  var url = window.location; 
 $（'a [href =''+ url +'''）。parent（'li'）。addClass（'active'）; 
  

希望这会有所帮助..

this is a very common problem, but i couldn't find any solutions to my situation. i'm making a pretty big website with hundred of pages, so i created a header page and a footer page that are the same in every page. now i want to highlight the menu button of the current page, but my menu is in the header that i include in every page using <?php include("header.php");?> so everything i try doesn't work. i tried this method but works only if there's the menu code in every page(so without using php include). any suggestions?

this is the code of my menu bar

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>

解决方案

try this script..

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

Hope this helps..

这篇关于如何突出显示当前页面的菜单链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！