내가 뭘 잘못하고 있는지 잘 모르겠습니다. 메뉴의 한 옵션에서 다른 옵션으로 전환하면 메뉴 색상이 색상을 변경하고 싶습니다. 이것이 내가 가진 것입니다.
$(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>
누군가 나를 도울 수 있다면 고맙습니다!
코드에서 두 가지 문제를 발견했습니다.
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] 삭제
몇 마디 만하겠습니다