javascript - 템플릿 상속에서 현재 탐색을 올바르게 강조표시하는 방법은 무엇입니까? (온라인 대기 중...)

위 탐색과 유사하게 템플릿 상속의 원리를 사용하여 thinkphp에서 일반 헤더, 탐색 탐색, 바닥글 하단 등을 포함하는 base.html 파일을 정의했습니다. html 파일은 base.html 템플릿을 상속받습니다.

• 다른 페이지를 방문할 때 현재 페이지에 해당하는 탐색을 어떻게 강조할 수 있나요?

• 위와 같이 실제 페이지를 방문했을 때 탐색이 다단계 탐색인 경우 현재 페이지에 해당하는 탐색을 강조 표시하려면 어떻게 해야 합니까?

• 메인 내비게이션에 해당하는 하위 내비게이션을 방문할 때 해당 페이지의 하위 내비게이션에서 메인 내비게이션을 올바르게 강조 표시하려면 어떻게 해야 하나요?

온라인에서 기다리는 중입니다. 친구들이 조언을 해주길 바랍니다.

답글 내용:

위 탐색과 유사하게 템플릿 상속의 원리를 사용하여 thinkphp에서 일반 헤더, 탐색 탐색, 바닥글 하단 등을 포함하는 base.html 파일을 정의했습니다. html 파일은 base.html 템플릿을 상속받습니다.

• 다른 페이지를 방문할 때 현재 페이지에 해당하는 탐색을 어떻게 강조할 수 있나요?

• 위와 같이 실제 페이지를 방문했을 때 탐색이 다단계 탐색인 경우 현재 페이지에 해당하는 탐색을 강조 표시하려면 어떻게 해야 합니까?

• 메인 내비게이션에 해당하는 하위 내비게이션을 방문할 때 해당 페이지의 하위 내비게이션에서 메인 내비게이션을 올바르게 강조 표시하려면 어떻게 해야 하나요?

온라인에서 기다리는 중입니다. 친구들이 조언을 해주길 바랍니다.

이것은 js에 의해 제어되는 것으로 보이며 작성자가 탐색 탐색도 만들었습니다. thinkphp에서 해당 태그를 사용하여 를 가져오세요. 기본값이므로 작동할지는 모르겠습니다. 엔트리 파일을 실행해서 포함시켜야 하는데

페이지를 로드한 후 현재 url이 header.html, a에 있는 href 태그의

으로 시작하는지 확인합니다.

예를 들어 현재 url:xxx.com/home/xxxx => a href="xxx.com/home", 매칭 후 class active 하이라이트

추가

동일한 레이아웃 페이지에 서로 다른 페이지가 포함되어야 하고, 각 페이지마다 해당 페이지가 속한 탐색을 표시하는 방법을 모르기 때문에 고민이신가요?

그렇다면 js 측면에서 URL부터 시작하여 URL 규칙을 분석한 다음 메뉴를 강조 표시할 수 있습니다

PHP의 경우 url이나 컨트롤러 방식을 사용할 수 있으며, 강조표시는 js나 css로도 가능합니다.

일반적으로 기억해야 할 점은 다양한 액세스 형식에 따라 구분하고 판단한 다음 강조 표시한다는 것입니다.

방법 1은 js로 제어할 수 있습니다. 이 베이스가 포함된 각 페이지에 js를 작성하세요. ES6는 사용자의 편의를 위해 특별히 사용되지 않습니다.

<code>var nav = Array.prototype.slice.call(document.querySelectorAll('#nav a'));
var currentPath = location.pathname;
nav.forEach(function(a) {
    if(a.pathname === currentPath) a.classList.add('active');
});</code>

방법 2, php를 사용합니다. 아이디어는 같습니다. 현재 요청한 페이지의 URL을 가져온 다음 경로를 일치시킵니다. 그런데 PHP 세트를 1년 넘게 사용하지 않아서 작성 방법을 잊어버렸습니다. . . .

개인은 일반적으로 _initialize:

<code>$this->assign("cur_nav","home");</code>

<code><li <eq name="cur_nav" value="company">class="active"</eq> ><a href="{:U('/clist')}">装修公司</a></li>
<li <eq name="cur_nav" value="demand">class="active"</eq> ><a href="{:U('/dlist')}">装修招标</a></li></code>

이와 유사하게 템플릿에서 curr_nav 값을 결정합니다.
내비게이션이 단순하다면 모듈, 컨트롤러, 연산의 조합을 통해 직접 판단할 수 있습니다
JS도 판단할 수 있지만 페이지가 깜박이는게 불편할 것 같은 느낌이 듭니다!