javascript - 模板繼承中如何正確的高亮目前導航？ （線上等...）

類似於上面這種導航，我在thinkphp中利用其模板繼承的原理定義了一個base.html的文件，其中包含通用的header頭部、nav導航、footer底部，其它的html文件將繼承該base.html模板。

• 請問我在訪問其它頁面的時候如何高亮當前頁面對應的導航？

• 如上圖，當我造訪實戰頁面的時候，如何高亮當前頁面對應的導航，如果該導航為多層導航？

• 當我訪問對應主導航的下級導航時，如何正確的高亮對應頁面的子導航上的主導航？

在線等，希望各位朋友能指點下疑惑。

回覆內容：

類似於上面這種導航，我在thinkphp中利用其模板繼承的原理定義了一個base.html的文件，其中包含通用的header頭部、nav導航、footer底部，其它的html文件將繼承該base.html模板。

• 請問我在訪問其它頁面的時候如何高亮當前頁面對應的導航？

• 如上圖，當我造訪實戰頁面的時候，如何高亮當前頁面對應的導航，如果該導航為多層導航？

• 當我訪問對應主導航的下級導航時，如何正確的高亮對應頁面的子導航上的主導航？

在線等，希望各位朋友能指點下疑惑。

這個貌似屬於js控制的吧，而且樓主也做了nav導航了，thinkphp 當中用它的標籤，引入試試不知道行不行，因為它默認要跑入口文件就包含還真的需要用它的

載入頁面後，判斷下當前的url，是否是以header.html中的a標籤的href開頭，

例如當前url:xxx.com/home/xxxx => a href="xxx.com/home"，匹配後添加class active高亮

你應該是因為同一layout頁需要包含不同頁面而不知如何為每個頁面顯示它所屬的導航而困擾吧？

如果是的話，那麼js方面，你可以從url入手，分析url規則，然後高亮菜單

PHP的話，url或控制器方法都可以，也是判斷，高亮的話，配合js或css都可以實作

總的來說，你需要記住的就是，根據訪問的形式不同，剝離開來，進行判斷，然後高亮，就可以了。

方法1，可以用js控制，在每個包含這個base的頁面中寫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那一套都一年多不用了，忘記咋寫了。 。 。 。

個人一般在_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也能判斷只是感覺頁會閃爍不爽!