활성 클래스 메뉴 HTML-CSS-JS가 작동하지 않습니다.

익히다

내가 뭘 잘못하고 있는지 잘 모르겠습니다. 메뉴의 한 옵션에서 다른 옵션으로 전환하면 메뉴 색상이 색상을 변경하고 싶습니다. 이것이 내가 가진 것입니다.

    $(document).ready(function() {
      $('ul li a').click(function() {
        $('li a').removeClass("#menu .current_page_item a");
        $(this).addClass("#menu .current_page_item a");
      });
    });
#menu li:hover a,
#menu li.active a,
#menu li.active span {
  background: #2980b9;
  color: rgba(255, 255, 255, 1);
}
#menu .current_page_item a {
  background: #2980b9;
  color: rgba(255, 255, 255, 1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li class="current_page_item"><a href="index.html" accesskey="1" title="">Homepage</a>
    </li>
    <li><a href="staging.html" accesskey="2" title="Staging">Staging Form</a>
    </li>
    <li><a href="UAT.html" accesskey="4" title="">UAT</a>
    </li>
    <li><a href="PILOT.html" accesskey="8" title="">PILOT</a>
    </li>
    <li><a href="#" accesskey="5" title="">PROD</a>
    </li>
    <li><a href="#" accesskey="7" title="">Remediation</a>
    </li>
  </ul>
</div>

누군가 나를 도울 수 있다면 고맙습니다!

TSR

코드에서 두 가지 문제를 발견했습니다.

1) RemoveClass 및 Addclass는 특수 문자를 포함하지 않아야합니다. CSS 선택자가 아닙니다. 전달할 수있는 것은 클래스 값뿐입니다. 코드에서 ID를 입력하고 클래스 이름 앞에 점을 추가했습니다. 바꾸기 : $('li a').removeClass("#menu .current_page_item a");removeClass("current_page_item")

2) <a>클릭하면 클릭되는 것이 아니라 <li>이므로 parent()addClass를 대상으로 지정해야합니다.<li>

다음은 스 니펫이있는 완전한 코드입니다.

#menu li:hover a, #menu li.active a, #menu li.active span
{
    background: #2980b9;
    color: rgba(255,255,255,1);
}    

#menu .current_page_item a
{
    background: #2980b9;
    color: rgba(255,255,255,1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li class="current_page_item"><a href="index.html" accesskey="1" title="">Homepage</a></li>
<li><a href="#" accesskey="2" title="Staging">Staging Form</a>          </li>
<li><a href="#" accesskey="4" title="">UAT</a></li>
<li><a href="#" accesskey="8" title="">PILOT</a></li>
<li><a href="#" accesskey="5" title="">PROD</a></li>
<li><a href="#" accesskey="7" title="">Remediation</a></li>
  

<script>
$(document).ready(function(){
$('ul li a').click(function(){
$('ul li').removeClass("current_page_item");
$(this).parent().addClass("current_page_item");
});
});
</script>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

분류에서Dev

Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

분류에서Dev

CSS onclick 활성 클래스가 작동하지 않습니다.

분류에서Dev

순수 HTML 및 CSS 햄버거 메뉴가 작동하지 않습니다.

분류에서Dev

활성 클래스가 추가되지만 이전 메뉴를 제거하지는 않습니다.

분류에서Dev

CSS 활성 메뉴 항목이 작동하지 않습니까?

분류에서Dev

@ Html.ActionLink가 CSS 클래스에서 작동하지 않습니다.

분류에서Dev

HTML 및 CSS : 드롭 다운 메뉴가 작동하지 않음

분류에서Dev

CSS 드롭 다운 메뉴가 작동하지 않습니다.

분류에서Dev

CSS 수평 메뉴가 작동하지 않습니다.

분류에서Dev

HTML 및 CSS-드롭 다운 메뉴가 작동하지 않는 이유를 파악할 수 없습니다.

분류에서Dev

CSS 클래스가 제대로 작동하지 않습니다.

분류에서Dev

CSS 클래스가 작동하지 않습니다.

분류에서Dev

CSS 클래스 선택기가 작동하지 않습니다.

분류에서Dev

css 클래스가 제대로 작동하지 않습니다.

분류에서Dev

버거 메뉴가 CSS, JS 및 HTML로 표시되지 않습니다.

분류에서Dev

Codeigniter 이메일 클래스가 작동하지 않습니다.

분류에서Dev

css 메뉴 메이커가 모바일에서 작동하지 않습니다.

분류에서Dev

Joomla 3 메뉴 활성 상태가 작동하지 않음

분류에서Dev

Javascript 클래스 생성자가 작동하지 않습니다.

분류에서Dev

배열의 다형성 하위 클래스 개체 메서드가 작동하지 않습니다.

분류에서Dev

CSS Slider의 탭의 활성 클래스 (Bootstrap)가 두 번째 슬라이드에서 작동하지 않습니다.

분류에서Dev

CSS 클래스 '활성'이로드 페이지에서 작동하지 않습니다.

분류에서Dev

CSS 중첩 메뉴 자동 너비가 작동하지 않습니다.

분류에서Dev

하위 메뉴의 수직 드롭 다운 메뉴 활성 클래스

분류에서Dev

css 드롭 다운 메뉴가 호버에서 작동하지 않습니다.

분류에서Dev

CSS 드롭 다운 메뉴가 예상대로 작동하지 않습니다.

분류에서Dev

Twitter Bootstrap : 드롭 다운 메뉴 클래스가 작동하지 않음

분류에서Dev

CSS float : right가 JQuery UI 선택 메뉴에서 작동하지 않습니다.

Related 관련 기사

  1. 1

    Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

  2. 2

    Wordpress 메뉴 CSS 클래스가 작동하지 않습니다.

  3. 3

    CSS onclick 활성 클래스가 작동하지 않습니다.

  4. 4

    순수 HTML 및 CSS 햄버거 메뉴가 작동하지 않습니다.

  5. 5

    활성 클래스가 추가되지만 이전 메뉴를 제거하지는 않습니다.

  6. 6

    CSS 활성 메뉴 항목이 작동하지 않습니까?

  7. 7

    @ Html.ActionLink가 CSS 클래스에서 작동하지 않습니다.

  8. 8

    HTML 및 CSS : 드롭 다운 메뉴가 작동하지 않음

  9. 9

    CSS 드롭 다운 메뉴가 작동하지 않습니다.

  10. 10

    CSS 수평 메뉴가 작동하지 않습니다.

  11. 11

    HTML 및 CSS-드롭 다운 메뉴가 작동하지 않는 이유를 파악할 수 없습니다.

  12. 12

    CSS 클래스가 제대로 작동하지 않습니다.

  13. 13

    CSS 클래스가 작동하지 않습니다.

  14. 14

    CSS 클래스 선택기가 작동하지 않습니다.

  15. 15

    css 클래스가 제대로 작동하지 않습니다.

  16. 16

    버거 메뉴가 CSS, JS 및 HTML로 표시되지 않습니다.

  17. 17

    Codeigniter 이메일 클래스가 작동하지 않습니다.

  18. 18

    css 메뉴 메이커가 모바일에서 작동하지 않습니다.

  19. 19

    Joomla 3 메뉴 활성 상태가 작동하지 않음

  20. 20

    Javascript 클래스 생성자가 작동하지 않습니다.

  21. 21

    배열의 다형성 하위 클래스 개체 메서드가 작동하지 않습니다.

  22. 22

    CSS Slider의 탭의 활성 클래스 (Bootstrap)가 두 번째 슬라이드에서 작동하지 않습니다.

  23. 23

    CSS 클래스 '활성'이로드 페이지에서 작동하지 않습니다.

  24. 24

    CSS 중첩 메뉴 자동 너비가 작동하지 않습니다.

  25. 25

    하위 메뉴의 수직 드롭 다운 메뉴 활성 클래스

  26. 26

    css 드롭 다운 메뉴가 호버에서 작동하지 않습니다.

  27. 27

    CSS 드롭 다운 메뉴가 예상대로 작동하지 않습니다.

  28. 28

    Twitter Bootstrap : 드롭 다운 메뉴 클래스가 작동하지 않음

  29. 29

    CSS float : right가 JQuery UI 선택 메뉴에서 작동하지 않습니다.

뜨겁다태그

보관