시놉시스여러 .html 페이지를 사용하여 클릭 한 각 탐색 링크에 .current 클래스를 동적으로 추가/제거하는 방법은 무엇입니까?
는 동적으로 클릭 할 때마다 메뉴 링크에 .current 클래스를 추가하는 샘플 헤더 탐색을 만들려고하고 있습니다. 자바 스크립트 및/또는 여러 .html 페이지와 함께 jQuery를 사용하여이를 수행하려고합니다.
알려진 버그는 지금 .current 클래스는 단순히 링크를 클릭 잠시 깜박하지만, 즉시 제거
로 볼 수 있습니다.
탐색 링크가 클릭 된 기록 된 메시지는 콘솔에 남아 있지 않습니다. 현재 일시적으로 깜박이고 곧바로 제거됩니다.
질문
은 가능한 동적으로 추가/다중이 .html 페이지를 사용하여 클릭 할 때마다 링크 에 .current 클래스를 제거하거나 내가 MVC 같은 또는 프레임 워크 등을 개시 더 나을 수 있나요 angular.js?
닫는 본문 태그 바로 앞의 페이지 하단에 jQuery 참조 스크립트가있는 것이 더 좋습니까?
내 헤더 탐색 모양이 같은 샘플 프로젝트 :
<nav>
<ul id="headerNav">
<li>
<a id="home" class="headerLink" href="index.html">Home</a>
</li>
<li>
<a id="about" class="headerLink" href="about.html">About</a>
</li>
</ul>
</nav>
내 script.js 파일은 다음과 같습니다.
/*jslint browser: true*/
/*global document, window, $, jQuery, alert, console, require, logger*/
$(document).ready(function() {
'use strict';
console.log("dom is ready!");
initHeaderNavLinks();
});
function initHeaderNavLinks() {
console.log("initializing header nav links...");
// add current class to first link in header navigation
$('#headerNav li:first a').addClass("current");
}
$('.headerLink').click(function() {
var clickedId = $(this).attr('id');
var msg = "";
msg = "clickedId: " + clickedId;
console.log(msg);
$(this).addClass('current');
});
여기 Plunker의 샘플 프로젝트입니다. https://plnkr.co:443/pVPDBfjmhqaIwnMEtMgm
UPDATE 관심이 그 사람들을 위해
, 내 현재의 요구에 가장 적합한 내 코드를 단순화하는 솔루션을 발견했다. currentPageID 변수를 스크립트 태그의 각 페이지에 직접 포함 시키기로 결정했습니다.
<nav>
<ul>
<li>
<a id="home" href="index.html">Home</a>
</li>
<li>
<a id="about" href="about.html">About</a>
</li>
</ul>
</nav>
내 script.js이 파일 외모 : 다음과 같이
<script>
var currentPageID = "about";
</script>
내 헤더 네비게이션 지금
추가 프로젝트 각 페이지의 머리에이 스크립트 태그 업데이트
이렇게. 당신은 내가 HTML5의 데이터 무엇에 .dataset.whatever으로, 값을 유지하는 속성을 사용합니다 (이 경우, 페이지에 쓸 수없는 경우 다음
/*jslint browser: true*/ /*global document, window, $, jQuery, alert, console, require, logger*/ $(document).ready(function() { 'use strict'; console.log("dom is ready!"); console.log("currentPageID: " + currentPageID); $("#" + currentPageID).addClass('current'); });
다른 페이지에서 사용자를 탐색 중이며'script'를 재설정중인'a' 태그를 클릭 할 때 페이지가 새로 고침 중입니다. – Rayon
@Rayon이 말한 것과 싸우기 위해'localStorage'를 사용하여 탐색 버튼 클릭 한 후 페이지가로드 될 때 가져옵니다. 이것은 좀 더 많은 작업이 필요하지만 신뢰성이 있어야합니다. 또 다른 방법은'html' 페이지를 현재 페이지의 컨테이너에 동적으로 적재하는 것입니다. – Adjit
이것이 Adjit과 동일한 것인지 확실하지 않지만 세션 변수를 사용하여 어떤 링크가 '현재'클래스를 보유 할 수 있는지 파악할 수 있습니다. 첫 번째 페이지로드시 설정하고로드 할 때 각 페이지를 참조하십시오. –