현재 페이지를 기반으로 링크를 강조 표시하려면 어떻게 해야 합니까?

StackOverflow https://stackoverflow.com/questions/180887

  •  05-07-2019
  •  | 
  •  

문제

정말 어리석은 질문처럼 들리면 죄송합니다. 하지만 링크된 페이지에 있을 때 링크 색상을 변경해야 합니다.

예를 들어 stackoverflow의 "질문" 페이지에 있으면 상단의 링크 색상이 변경됩니다.어떻게 하나요?

도움이 되었습니까?

해결책

페이지를 렌더링 할 때 "현재 페이지"와 같은 클래스를 링크에 추가하십시오. 그런 다음 다른 링크와 별도로 스타일링 할 수 있습니다.

예를 들어, stackoverflow는 링크를 렌더링합니다 class="youarehere" 페이지를 가리킬 때 이미 켜져 있습니다.

다른 팁

실제로 페이지 구성 방식에 따라 다릅니다. 일반적으로 CSS를 사용 하여이 작업을 수행하고 "Active"라는 ID를 링크에 제공합니다.

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

... 그리고 CSS에서 ...

a#active { color: yellow; }

분명히 이것은 상당히 단순한 예이지만 일반적인 아이디어를 보여줍니다.

각 페이지에 대한 링크를 실제로 수정하지 않고도이 작업을 수행 할 수 있습니다.

스택 오버 플로우 클론에서 나는 django와 함께 빌드하고있다. 나는 이것을하고있다 :

<!-- 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>

그런 다음 채우십시오 bodyclass 페이지 템플릿에서처럼 :

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

그런 다음 다음 CSS를 사용하면 각 페이지마다 적절한 링크가 강조 표시됩니다.

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; }

각 페이지의 본문 태그에서 클래스를 설정하십시오 (수동 또는 서버 측). 그런 다음 CSS에서 해당 클래스를 사용하여 어떤 페이지를 식별하고 그에 따라 항목의 스타일을 업데이트합니다.

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

다음은 더 긴 설명이 있습니다

어떤 이유로 어떤 이유로 서버 측에서 이것을 처리하고 싶지 않다면 다음을 시도 할 수 있습니다.

// assuming this JS function is called when page loads
onload()
{
  if (location.href.indexOf('/questions') > 0)
  {
    document.getElementById('questionsLink').className = 'questionsStyleOn';
  }
}

현재 페이지의 링크에 클래스를 설정하면 서버측 코드가 가장 쉽습니다. 그러나 JavaScript를 사용하는 클라이언트측에서도 가능합니다. 특정 클래스의 모든 요소에 일치하는 href가 있는 두 번째 클래스를 설정하면 됩니다. 현재 페이지.

document.getElementsByTagName() 또는 document.links[]를 사용하고 탐색 링크를 나타내는 클래스에서만 해당 항목을 찾은 다음 현재 URL과 일치하는 경우 현재를 나타내는 두 번째 클래스를 설정할 수 있습니다.

URL은 상대적이지만 document.URL은 그렇지 않습니다.그러나 때때로 상대 대 상대 비교에서도 이와 동일한 문제가 발생할 수 있습니다.테이블 기반 디자인에서 콘텐츠를 생성하고 사용자가 절대 또는 상대 URL을 입력할 수 있는 경우 서버 측에서 절대입니다.

이를 위해 서버에 코드가 필요합니다. 단순한 접근법은 현재 페이지의 URL을 링크의 URL과 비교하는 것입니다. 그러나 stackoverflow에는 여러 가지 URL이있어 '질문'탭이 강조 표시됩니다.

보다 정교한 버전은 페이지를 변경할 때 세션에 무언가를 넣을 수 있습니다 (너무 강력하지 않음). 각 메뉴 항목과 관련된 페이지/URL 패턴 목록을 저장합니다. 또는 페이지 자체의 코드 내에서 강조 할 항목을 결정하기 위해 변수를 설정하십시오.

그런 다음 John Millikin이 제안한 것처럼 링크 나 "Current-Page"와 같은 상위 요소 중 하나에 수업을 작성하여 색상을 제어합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top