CSS를 현재 페이지와 jQuery 링크로 바꾸기

Question

새로운 코더를 사용하면 문제가 생겨서 고맙게 생각합니다.

현재 페이지에 적용되는 링크를 인식하고 해당 링크에 다른 CSS 스타일을 적용하는 코드를 작성하고 싶습니다. 나는이 문제를 연구하여 jQuery를 사용하여 현재 링크를 확인한 다음 새로운 클래스를 적용하는 것이 가장 효과적이라는 것을 발견했다 (예 : "현재"). 그러나 사이트에서이를 구현하려고 시도했을 때 작동하지 않았습니다.

이

내가 함께 일하고 있어요 HTML입니다 :

<nav class="main-nav"> 
    <a href="http://website.com" class="main-nav-link"> 
     <span class="main-nav-item" id="nav-content"></span> 
    </a> 
    <a href="http://website.com/calendar" class="main-nav-link"> 
     <span class="main-nav-item" id="nav-calendar"></span> 
    </a> 
    <a href="http://website.com/profile" class="main-nav-link"> 
     <span class="main-nav-item" id="nav-profile"></span> 
    </a> 
</nav> 

그리고 이것은 제가 적용 한 CSS입니다 :

.main-nav .main-nav-item { 
    height: 50px; 
    width: 150px; 
} 

.main-nav #nav-content { 
    background: url('/images/content-inactive.png') no-repeat center; 
} 

.main-nav #nav-calendar { 
    background: url('/images/calendar-inactive.png') no-repeat center; 
} 

.main-nav #nav-profile { 
    background: url('/images/profile-inactive.png') no-repeat center; 
} 

내 목표는 내 스팬에 대한 background:을 변경하는 것입니다 현재 페이지의 <a> 여기

이 문제를 해결 한 다른 StackOverflow의 스레드하지만 나 해결책에 도달하는 데 도움이되지 않은 :

• Change link color of the current page with CSS
• Dynamically change CSS of link based on current page

그것은 나에게 완전히 명확하지 않다을 내가 자바 스크립트를 넣어야하는 곳이지만, 현재 <script type="text/javascript">과 </script> 사이에 <header> 섹션에 있습니다.

미리 도움을 주셔서 감사합니다. :)

-

UPDATE :

나는 현재 페이지에 다음 코드를 가지고 있지만, 그것은 작동하지 않습니다.

자바 스크립트 :

<script> 

     $(document).ready(function() { 

    // Get the current URL 
      var currentUrl = window.location.href; 

      // Get the span you want with a combination class and attribute and child jQuery selector 
      var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item"); 

      // Then add your class 
      currentMenuItem.addClass("current"); 

     }); 

</script> 

그리고 CSS :

#nav-content.current { 
    background: url('/images/content-active.png') no-repeat center -94px; 
} 

는 jQuery를 활성 링크로 .current 클래스를 추가하지 않는, 그래서 CSS도 할 수있는 기회를 가지고 있지 않습니다 작업. 다음을 사용하여 스크립트 페이지 태그 내부

Answer 1

window.location.href :

그런 다음에 코드의 마지막 라인을 변경할 수 있습니다. 그런 다음 href 속성을 가진 <a class="main-nav-link"> 요소의 <span class="main-nav-item"> 하위를 찾는 jQuery 선택기를 사용해야합니다. 해당 요소에 "현재"클래스를 적용하면 잘 수행해야합니다. 그렇다면이 JavaScript는 어떻습니까?

// Get the current URL 
var currentUrl = window.location.href; 

// Get the span you want with a combination class and attribute and child jQuery selector 
var currentMenuItem = $(".main-nav-link[href='" + currentUrl + "'] > .main-nav-item"); 

// Then add your class 
currentMenuItem.addClass("current"); 

스크립트 태그에 넣고 사용해보십시오.

제대로 작동하면 올바른 CSS 규칙을 추가해야합니다. 예를 들어 #nav-content.current (및 나머지는 모두 나머지 배경 이미지)을로드하는 규칙을 추가합니다.

(현재 CSS에 대한주의 사항 : 당신이 당신의 선택기를 overqualifying 것 같습니다 당신이 페이지에 다른 곳에서는 약 .main-nav-item의 걱정이없는 경우에는 .main-nav 이전에 그 클래스를 자격을 귀찮게하지 않습니다. ID 선택기 (예 : #nav-content)는 고유 한 식별자이기 때문에 자격을 취득 할 필요가 없습니다.)

당신과 도움이되는 희망입니다.

최근 질문

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 관련 문제

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.