ExpressJs：在視圖上使用導航欄

我使用ExpressJS和EJS作爲我的視圖。ExpressJs：在視圖上使用導航欄

在我的導航欄中我有鏈接，當用戶在當前頁面上時需要有class="active"。如果我在我的觀點中使用偏見的話。我該怎麼做呢？

樣品

Index.ejs

<ul class="nav navbar-nav navbar-right"> 
     <li><a class="active" href="/Index">Home</a></li> 
     <li><a href="/About">About</a></li> 
     <li><a href="/Work">Work</a></li> 
</ul>

About.ejs

<ul class="nav navbar-nav navbar-right"> 
     <li><a href="/Index">Home</a></li> 
     <li><a class="active" href="/About">About</a></li> 
     <li><a href="/Work">Work</a></li> 
</ul>

Work.ejs

<ul class="nav navbar-nav navbar-right"> 
     <li><a href="/Index">Home</a></li> 
     <li><a href="/About">About</a></li> 
     <li><a class="active" href="/Work">Work</a></li> 
</ul>

那是我做這件事的方式！..通過製作導航欄，每次我做了新的一頁

我應該怎麼讓它當我呈現了新的一頁是不需要再次渲染導航欄？

來源

2017-02-24 Grover Reyes

如果使用的是引導，你可以使用'標籤導航，tab'這裏提到：https://www.w3schools.com/boot strap/bootstrap_ref_js_tab.asp 其他的你可以使用javascript，https://www.w3schools.com/howto/howto_js_tabs.asp –

你可以通過一個局部變量的部分「活躍」路線的價值..

<%- include('partial/nav', {active: "About"}); %>

然後，檢查活動VAR設置「活動」類的導航部分模板：

<ul class="nav navbar-nav navbar-right"> 
    <li><a <%if(active=="Home"){%>class="active"<%}%> href="/Index">Home</a></li> 
    <li><a <%if(active=="About"){%>class="active"<%}%> href="/About">About</a></li> 
    <li><a <%if(active=="Work"){%>class="active"<%}%> href="/Work">Work</a></li> 
</ul>

這裏有一個similar approach

來源

2017-02-24 13:33:23 ZimSystem

你應該載入您的導航像this--

<script> 
$("#header").load("header.ejs"); 
</script>

然後檢索當前網頁的網址，並從檢索活動頁面名稱。然後使用此功能將活動類添加到當前頁面，

$(document).ready(function($){ 
var url = window.location.href; 
$('.nav li a[href="'+url+'"]').addClass('active'); 
});

注意：您需要通過一些功能來檢索您的網址頁面的名稱，因爲這將是完整的網頁網址。

您將只需寫一次header.ejs並將其包含在每個頁面中。

希望這會有所幫助！

來源

2017-02-24 12:46:30 neophyte

ExpressJs：在視圖上使用導航欄

回答

相關問題