Html 突出显示当前页面的导航菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4626431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highlight the navigation menu for the current page
提问by hguser
In a page with some navigation links,I want the link of the current page are hightlighted,just like this:
在有一些导航链接的页面中，我想突出显示当前页面的链接，就像这样：
The link "HTML Attributes" is highlighted(bolded) since this link will take one to the current page.
链接“ HTML Attributes”被突出显示（粗体），因为该链接将指向当前页面。
I know this can be implemented manually(just hightlighted the according link,but is there some smart way? highlight the right link dynamically and automatically?
我知道这可以手动实现（只是突出显示相应的链接，但是有什么聪明的方法吗？动态和自动突出显示正确的链接？
回答by Raj
CSS:
CSS：
.topmenu ul li.active a, .topmenu ul li a:hover {
text-decoration:none;
color:#fff;
background:url(../images/menu_a.jpg) no-repeat center top;
}
JavaScript:
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 Code:
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>
回答by icabod
You can set the id of the body of the page to some value that represents the current page. Then for each element in the menu you set a class specific to that menu item. And within your CSS you can set up a rule that will highlight the menu item specifically...
您可以将页面正文的 id 设置为代表当前页面的某个值。然后为菜单中的每个元素设置一个特定于该菜单项的类。在您的 CSS 中，您可以设置一个规则，专门突出显示菜单项...
That probably didn't make much sense, so here's an example:
这可能没有多大意义，所以这里有一个例子：
<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>
In the page1.html, you would set the id of the body to: id="page1".
在 page1.html 中，您将正文的 id 设置为：id="page1"。
Finally in your CSS you have something like the following:
最后，在您的 CSS 中，您有如下内容：
#index #menu .index, #page1 #menu .page1 {
font-weight: bold;
}
You would need to alter the ID for each page, but the CSS remains the same, which is important as the CSS is often cached and can require a forced refresh to update.
您需要更改每个页面的 ID，但 CSS 保持不变，这很重要，因为 CSS 经常被缓存并且可能需要强制刷新才能更新。
It's not dynamic, but it's one method that's simple to do, and you can just includethe menu html from a template file using PHP or similar.
它不是动态的，但它是一种简单的方法，您可以include使用 PHP 或类似的模板文件中的菜单 html。
回答by Mareno
It seems to me that you need current code as this ".menu-current css", I am asking the same code that works like a charm, You could try something like this might still be some configuration
在我看来，你需要当前的代码作为这个“.menu-current css”，我问的是同样的代码，就像一个魅力，你可以尝试这样的东西可能仍然是一些配置
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;
}
回答by Mareno
<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>
回答by saravanabawa
Css classes are here
CSS 类在这里
<style type="text/css">
.mymenu
{
background-color: blue;
color: white;
}
.newmenu
{
background-color: red;
color: white;
}
</style>
Make your HTML like this, Set url as id
使您的 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>
Here write javascript, put this javascript after the HTML code.
这里写javascript，把这个javascript放在HTML代码之后。
function menuHighlight() {
var url = window.location.href;
$('#'+tabst).addClass('new_current');
}
menuHighlight();
回答by David Berning
I usually use a class to achieve this. It's very simple to implement to anything, navigation links, hyperlinks and etc.
我通常使用一个类来实现这一点。实现到任何东西，导航链接，超链接等都非常简单。
In your CSS document insert:
在您的 CSS 文档中插入：
.current,
nav li a:hover {
/* styles go here */
color: #e00122;
background-color: #fffff;
}
This will make the hover state of the list items have red text and a white background. Attach that class of current to any link on the "current" page and it will display the same styles.
这将使列表项的悬停状态具有红色文本和白色背景。将该类 current 附加到“当前”页面上的任何链接，它将显示相同的样式。
Im your HTML insert:
我是你的 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>
回答by user2844139
Please Look at the following:
请看以下内容：
Here is what's working:
这是有效的：
1.) top menu buttons are visible and highlight correctly
1.) 顶部菜单按钮可见并正确突出显示
2.) submenu buttons are not visible until topmenu is clicked
2.)在单击顶部菜单之前，子菜单按钮不可见
Here is what needs work:
这是需要工作的：
1.) when sub menu is clicked, looking for new page to keep the selected sub menu open (i will highlight the selected sub menu button for further clarification on navigation)
1.) 当点击子菜单时，寻找新页面以保持所选子菜单打开（我将突出显示所选子菜单按钮以进一步说明导航）
Please see code here: http://jsbin.com/ePawaju/1/edit
请在此处查看代码：http: //jsbin.com/ePawaju/1/edit
or here: http://www.ceramictilepro.com/_6testingonly.php#
或在这里：http: //www.ceramictilepro.com/_6testingonly.php#
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Do I need to put this script in the head section? Where is the best place?
我需要把这个脚本放在 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 is new to me, any help would greatly be appreciated :) var submenu;
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);
});
回答by Didaxis
I would normally handle this on the server-side of things (meaning PHP, ASP.NET, etc). The idea is that when the page is loaded, the server-side controls the mechanism (perhaps by setting a CSS value) that is reflected in the resulting HTML the client sees.
我通常会在服务器端处理这个问题（意味着 PHP、ASP.NET 等）。这个想法是，当页面加载时，服务器端控制反映在客户端看到的结果 HTML 中的机制（可能通过设置 CSS 值）。
回答by Sapna
JavaScript:
JavaScript：
<script type="text/javascript">
$(function() {
var url = window.location;
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().parent().parent().addClass('active');
});
</script>
CSS:
CSS：
.active{
color: #fff;
background-color: #080808;
}
HTML:
HTML：
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true"><i class="glyphicon glyphicon-user icon-white"></i> MY ACCOUNT <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>
<?php echo anchor('myaccount', 'HOME', 'title="HOME"'); ?>
</li>
<li>
<?php echo anchor('myaccount/credithistory', 'CREDIT HISTORY', 'title="CREDIT HISTORY"'); ?>
</li>
</ul>
</li>
</ul>
回答by Habax
You can use Javascript to parse your DOM, and highlight the link with the same label than the first h1 tags. But I think it is overkill =)
您可以使用 Javascript 来解析您的 DOM，并使用与第一个 h1 标签相同的标签突出显示链接。但我认为这是矫枉过正 =)
It would be better to set a var wich contain the title of your page, and use it to add a class at the corresponding link.
最好设置一个包含页面标题的变量，并使用它在相应的链接上添加一个类。
