突出显示当前页面的导航菜单
在带有一些导航链接的页面中，我希望当前页面的链接突出显示，就像这样：
>链接“HTML 属性”突出显示（粗体），因为此链接将跳转到当前页面。
我知道这可以手动实现（只是突出显示相应的链接，但是有一些聪明的方法吗？动态和自动突出显示正确的链接？
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.
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（13）
CSS：
JavaScript：
Html 代码：
CSS:
JavaScript:
Html Code:
您可以将页面主体的 id 设置为代表当前页面的某个值。然后，为菜单中的每个元素设置一个特定于该菜单项的类。在 CSS 中，您可以设置一条规则来专门突出显示菜单项...
这可能没有多大意义，所以这里有一个示例：
在 page1.html 中，您可以将正文的 id 设置为：
id="page1"。最后，在 CSS 中，您将看到如下内容：
您需要更改每个页面的 ID，但 CSS 保持不变，这一点很重要，因为 CSS 通常会被缓存，并且可能需要强制刷新才能更新。
它不是动态的，但它是一种简单的方法，您只需使用 PHP 或类似工具
包含模板文件中的菜单 html 即可。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...
That probably didn't make much sense, so here's an example:
In the page1.html, you would set the id of the body to:
id="page1".Finally in your CSS you have something like the following:
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.
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.在我看来，你需要当前的代码，如“.menu-current css”，我问的是同样的代码，它的工作原理就像一个魅力，你可以尝试这样的东西，可能仍然是一些配置
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
Css类在这里
让你的HTML像这样，将url设置为id
在这里编写javascript，将此javascript放在HTML代码之后。
Css classes are here
Make your HTML like this, Set url as id
Here write javascript, put this javascript after the HTML code.
我通常会在服务器端处理这个问题（指 PHP、ASP.NET 等）。这个想法是，当页面加载时，服务器端控制机制（可能通过设置 CSS 值），该机制反映在客户端看到的结果 HTML 中。
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.
您可以使用 Javascript 解析 DOM，并突出显示与第一个 h1 标签具有相同标签的链接。但我认为这是矫枉过正=）
最好设置一个包含页面标题的var，并使用它在相应的链接处添加一个类。
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 =)
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.
我通常使用一个类来实现这一点。实现任何内容都非常简单，导航链接、超链接等。
在 CSS 文档中插入：
这将使列表项的悬停状态具有红色文本和白色背景。将当前类附加到“当前”页面上的任何链接，它将显示相同的样式。
我是您的 HTML 插入内容：
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:
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.
Im your HTML insert:
请查看以下内容：
这是有效的：
1.) 顶部菜单按钮可见并正确突出显示
2.) 子菜单按钮直到顶部才可见菜单被点击
这里需要做的工作：
1.）当点击子菜单时，寻找新页面以保持所选子菜单打开（我将突出显示所选子菜单按钮关于导航的进一步说明）
请参阅此处的代码：
http://jsbin.com/ePawaju/1/edit
或此处：
http://www.ceramictilepro.com/_6testingonly.php#
我需要把这个头部的脚本？最好的地方在哪里？
JQuery 对我来说是新的，任何帮助将不胜感激:)
var 子菜单；
Please Look at the following:
Here is what's working:
1.) top menu buttons are visible and highlight correctly
2.) sub menu buttons are not visible until top menu is clicked
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)
Please see code here:
http://jsbin.com/ePawaju/1/edit
or here:
http://www.ceramictilepro.com/_6testingonly.php#
Do I need to put this script in the head section? Where is the best place?
JQuery is new to me, any help would greatly be appreciated :)
var submenu;
JavaScript：
CSS：
HTML：
JavaScript:
CSS:
HTML:
我更喜欢使代码尽可能简短明了，并避免使用任何外部文件（包括 jquery）。
所以这就是我在研究了几个主题后得到的结果——使用简单的 Javascript 和 CSS，不需要 jquery。
在菜单完成后立即放置 javascript 代码（在关闭 ul、div 等之后） - 代码片段中的代码应位于
I prefer to keep code as short and plain as possible, and avoid using any external files (jquery included).
So here is what I've ended up with for myself after researching several topics - using plain Javascript and CSS, no need for jquery.
Put javascript code right after the menu finishes (after closing ul, div, whatever) - code from a snippet should be between
<script>Copy code here</script>That would allow for a script to execute right after menu will be loaded.
If you want to call it as a function on page load, then link will change only after all elements (including images) are loaded – place this code in a function, call it on page load, the code itself put before the closing tag like so:
您可以使用 PHP 或 Jquery 以多种方式实现此目的。这是我在我的项目中实现它的方法。
在 html 中打印 php 数据
执行此操作，您需要添加此内容
您也可以使用 Jquery在 CSS 中
You can Implement this in various ways usinh PHP or Jquery. Here is how I have implemented it in my Projects.
In html print the php data
YOu can also do this with Jquery
IN the CSS you need to add this
仅使用 CSS。您可以使用 CSS 属性选择器为每个页面选择适当的链接。
例如
about.html看起来像这样。CSS
HTML
Using CSS only. You can use CSS Attribute selector to select an appropriate link for every page.
For example
about.htmlwill look like this.CSS
HTML