突出显示当前页面的导航菜单
在具有一些导航链接的页面中，我希望当前页面的链接被高亮显示，就像这样：
链接“ HTML属性 ”会突出显示（粗体），因为此链接将带上当前页面。
我知道这可以手动实现（只是突出显示相应的链接，但有一些聪明的方式？dynamic和自动突出显示正确的链接？
您可以将页面正文的id设置为表示当前页面的某个值。 然后为菜单中的每个元素设置一个特定于该菜单项的类。 在你的CSS中，你可以设置一个规则来突出显示菜单项目…
这可能没有多大意义，所以这里是一个例子：
<body id="index"> <div id="menu"> <ul> <li class="index" ><a href="index.html">Index page</a></li> <li class="page1" ><a href="page1.html">Page 1</a></li> </ul> </div> <!-- menu --> </body> 在page1.html中，您可以将body的id设置为： id="page1" 。
最后在你的CSS里有如下的东西：
#index #menu .index, #page1 #menu .page1 { font-weight: bold; }
您需要更改每个页面的ID，但CSS保持不变，这一点非常重要，因为CSS经常被caching，并且可能需要强制刷新才能更新。
这不是dynamic的，但它是一个简单的方法，你可以使用PHP或类似的模板文件include菜单html。
CSS：
.topmenu ul li.active a, .topmenu ul li a:hover { text-decoration:none; color:#fff; background:url(..http://img.dovov.commenu_a.jpg) no-repeat center top; }
JavaScript的：
<script src="JavaScript/jquery-1.10.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { // this will get the full URL at the address bar var url = window.location.href; // passes on every "a" tag $(".topmenu a").each(function() { // checks if its the same on the address bar if (url == (this.href)) { $(this).closest("li").addClass("active"); //for making parent of submenu active $(this).closest("li").parent().parent().addClass("active"); } }); }); </script>
HTML代码：
<div class="topmenu"> <ul> <li><a href="Default.aspx">Home</a></li> <li><a href="NewsLetter.aspx">Newsletter</a></li> <li><a href="#">Forms</a></li> <li><a href="#">Mail</a></li> <li><a href="#">Service</a></li> <li style="border:none;"><a href="#">HSE</a></li> <li><a href="#">MainMenu2</a> <ul> <li>submenu1</li> <li>submenu2</li> <li>submenu3</li> </ul> </li> </ul> </div>
在我看来，你需要最新的代码作为这个“.menu-current css”，我问的是相同的代码，就像一个魅力，你可以尝试这样的事情可能仍然是一些configuration
a:link, a:active { color: blue; text-decoration: none; } a:visited { color: darkblue; text-decoration: none; } a:hover { color: blue; text-decoration: underline; } div.menuv { float: left; width: 10em; padding: 1em; font-size: small; } div.menuv ul, div.menuv li, div.menuv .menuv-current li { margin: 0; padding: 0; list-style: none; margin-bottom: 5px; font-weight: normal; } div.menuv ul ul { padding-left: 12px; } div.menuv a:link, div.menuv a:visited, div.menuv a:active, div.menuv a:hover { display: block; text-decoration: none; padding: 2px 2px 2px 3px; border-bottom: 1px dotted #999999; } div.menuv a:hover, div.menuv .menuv-current li a:hover { padding: 2px 0px 2px 1px; border-left: 2px solid green; border-right: 2px solid green; } div.menuv .menuv-current { font-weight: bold; } div.menuv .menuv-current a:hover { padding: 2px 2px 2px 3px; border-left: none; border-right: none; border-bottom: 1px dotted #999999; color: darkblue; }
<script id="add-active-to-current-page-nav-link" type="text/javascript"> function setSelectedPageNav() { var pathName = document.location.pathname; if ($("nav ul li a") != null) { var currentLink = $("nav ul li a[href='" + pathName + "']"); currentLink.addClass("active"); } } setSelectedPageNav(); </script>
Css类在这里
<style type="text/css"> .mymenu { background-color: blue; color: white; } .newmenu { background-color: red; color: white; } </style>
让你的HTML这样，将url设为ID
<div class="my_menu" id="index-url"><a href="index-url">Index</a></div> <div class="my_menu" id="contact-url"><a href="contact-url">Contac</a></div>
这里写javascript，把这个javascript放到HTML代码之后。
function menuHighlight() { var url = window.location.href; $('#'+tabst).addClass('new_current'); } menuHighlight();
我通常会在服务器端（即PHP，ASP.NET等）处理这个问题。 这个想法是，当页面加载时，服务器端控制机制（可能通过设置一个CSS值），反映在客户端看到的HTML中。
尝试使用
a:active{ font-weight: bold; }
在你的CSS文件中。
您可以使用Javascriptparsing您的DOM，并突出显示与第一个h1标签相同标签的链接。 但我认为这是过度杀伤=）
最好设置一个包含页面标题的var，并用它在相应的链接上添加一个类。
我通常使用一个类来实现这一点。 实现任何东西，导航链接，超链接等都非常简单
在你的CSS文档中插入：
.current, nav li a:hover { /* styles go here */ color: #e00122; background-color: #fffff; }
这将使列表项的hover状态具有红色文本和白色背景。 将该类当前附加到“当前”页面上的任何链接，它将显示相同的样式。
在你的HTML插入：
<nav> <ul> <li class="current"><a href="#">Nav Item 1</a></li> <li><a href="#">Nav Item 2</a></li> <li><a href="#">Nav Item 3</a></li> </ul> </nav>
请看下面的内容：
这是什么工作：
1.）顶部菜单button是可见的，并正确地突出显示
2.） 子菜单button是不可见的，直到顶部菜单被点击
这是什么需要工作：
1.）当子菜单被点击时，寻找新的页面保持选定的子菜单打开（我会突出显示所选的子菜单button进一步澄清导航）
请参阅此处的代码： http : //jsbin.com/ePawaju/1/edit
或在这里： http : //www.ceramictilepro.com/_6testingonly.php#
<head> <script src="jquery-latest.js"></script> </head>
我需要把这个脚本放在头部吗？ 最好的地方在哪里？
<div class="left"> <nav class="vmenu"> <ul class="vnavmenu"> <li data-ref="Top1"><a class="hiLite navBarButton2" href="#">Home</a> </li> </ul> <ul class="Top1 navBarTextSize"> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub1</a> </li> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub2</a> </li> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub3</a> </li> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">sub4</a> </li> </ul> <ul class="vnavmenu"> <li data-ref="Top2"><a class="hiLite navBarButton2" href="#">Repairs</a> </li> </ul> <ul class="Top2 navBarTextSize"> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">1sub1</a> </li> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">2sub2</a> </li> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">3sub3</a> </li> <li><a class="hiLite navBarButton2_sub" href="http://www.ceramictilepro.com/_5testingonly.php">4sub4</a> </li> </ul> </nav>
JQuery对我来说是新的，任何帮助将不胜感激:) var submenu;
$('.vnavmenu li').click(function () { var elems = $('.vmenu ul:not(.vnavmenu)').length; var $refClass = $('.' + $(this).attr('data-ref')); var visible = $refClass.is(':visible'); $('.vmenu ul:not(.vnavmenu)').slideUp(100, function () { if (elems == 1) { if (!visible) $refClass.slideDown('fast'); } elems--; }); if (visible) $('#breadcrumbs-pc').animate({ 'margin-top': '0rem' }, 100); else $('#breadcrumbs-pc').animate({ 'margin-top': '5rem' }, 100); });
