How do I highlight a link based on the current pag

2019-02-04 17:46发布

站内问答 / HTML/CSS
1880 7 4

Sorry if this sounds like a really stupid question, but I need to make a link change color when you are on the page it links to.

For example, when you are on the "Questions" page of stackoverflow, the link at the top changes color. How do you do this?

7条回答
走好不送
2楼-- · 2019-02-04 18:27

If for some reason you don't want to handle this on the server-side, you can try this:

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}
查看更多
0人赞 添加讨论(0) 举报
淡お忘
3楼-- · 2019-02-04 18:29

It really depends on how your page is constructed. Typically, I would do this using CSS, and assign give the link an id called "active"...

<a id="active" href="thisPage.html">this page</a>

...and in the CSS...

a#active { color: yellow; }

Obviously this is a fairly simplistic example, but it illustrates the general idea.

查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
4楼-- · 2019-02-04 18:31

Set a class on the body tag for each page (manually or server-side). Then in your CSS use that class to identify which page you're on and update the style on the item accordingly.

body.questions #questionsTab
{
    color: #f00;
}

Here's a good longer explanation

查看更多
0人赞 添加讨论(0) 举报
做个烂人
5楼-- · 2019-02-04 18:37

Server side code is the easiest, by just setting a class on the link on the current page, but this is also possible on the client-side with JavaScript, setting a second class on all elements in a particular class which have an href which matches the current page.

You could use either document.getElementsByTagName() or document.links[] and look only for those in a class denoting your navigation links and then set a second class denoting current if it matches the current URL.

The URLs will be relative, while document.URL will not. But you can sometimes have this same problem with relative vs. absolute on the server-side if you are generating content from a table-driven design and the users can put either absolute or relative URLs anyway.

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
6楼-- · 2019-02-04 18:38

You need code on the server for this. A simplistic approach is to compare the URL of the current page to the URL in the link; however consider that there are many different URLs in stackoverflow which all result in the 'Questions' tab being highlighted.

A more sophisticated version can either put something in the session when you change pages (not too robust); store a list of pages/URL patterns which are relevant to each menu item; or within the code of the page itself, set a variable to determine which item to highlight.

Then, as John Millikin suggests, put a class on the link or on one of its parent elements such as "current-page" which will control the colour of it.

查看更多
0人赞 添加讨论(0) 举报
成全新的幸福
7楼-- · 2019-02-04 18:42

You can do this without having to actually modify the links themselves for each page.

In the Stack Overflow clone I'm building with Django, I'm doing this:

<!-- base.html -->
...
<body class="{% block bodyclass %}{% endblock %}">
...
<div id="nav">
  <ul>
    <li id="nav-questions"><a href="{% url questions %}">Questions</a></li>
    <li id="nav-tags"><a href="{% url tags %}">Tags</a></li>
    <li id="nav-users"><a href="{% url users %}">Users</a></li>
    <li id="nav-badges"><a href="{% url badges %}">Badges</a></li>
    <li id="nav-ask-question"><a href="{% url ask_question %}">Ask Question</a></li>
  </ul>
</div>

Then filling in the bodyclass like so in page templates:

<!-- questions.html -->
{% extends "base.html" %}
{% block bodyclass %}questions{% endblock %}
...

Then, with the following CSS, the appropriate link is highlighted for each page:

body.questions #nav-questions a,
body.tags #nav-tags a,
body.users #nav-users a,
body.badges #nav-badges a,
body.ask-question #nav-ask-question a { background-color: #f90; }
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)