나는 그들이 이렇게되기를 바랍니다. 하나를 클릭 한 다음 다른 하나를 클릭 할 때까지 해당 텍스트의 색상을 녹색으로 변경합니다. 다른 하나를 클릭하면 클릭 한 항목이 녹색으로 바뀌고 클릭하면 이전 색상으로 돌아갑니다. 나는 CSS로 시도했지만 활성 상태에서만 좋습니다. 누군가 나를 도울 수 있습니까?
<div id="Space">
<ul>
<li role="presentation" class="sort">
<a class="link" href="/?sort=score&page=1" style="text-decoration:none;">link1</a>
</li>
<li role="presentation" class="date">
<a class="link" href="/?sort=date&page=1" style="text-decoration:none;">link2</a>
</li>
</ul>
</div>
HTML 코드 :
<div id="Space">
<ul>
<li role="presentation" class="sort">
<a class="link1" href="/?sort=score&page=1" style="text-decoration:none;">link1</a>
</li>
<li role="presentation" class="date">
<a class="link2" href="/?sort=date&page=2" style="text-decoration:none;">link2</a>
</li>
<li role="presentation" class="date">
<a class="link3" href="/?sort=date&page=3" style="text-decoration:none;">link3</a>
</li>
</ul>
</div>
Jquery 코드 :
//on page load
var ul_li_a = $("ul>li>a");
var lastClickTag = localStorage.getItem("last_clicked");
ul_li_a.css("color", "black");
if(lastClickTag){
$("."+lastClickTag).css("color", "green")
}
$('ul>li').on("click", function(){
ul_li_a.css("color", "black");
$(this).children("a").css("color", "green");
localStorage.setItem("last_clicked", $(this).children("a").attr("class"));
});
여기에서 테스트 코드를 확인하십시오 : https://jsfiddle.net/kkm37zgd/2/
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다