選定的菜單高亮Razor 3 cshtml使用js

昨天我開始翻譯我的頁面或將它從HTML5/CSS/JS/jQuery/PHP移動到剃鬚刀3或更確切地說cshtml/css/js，現在正在嘗試使活動頁面突出顯示在菜單中。選定的菜單高亮Razor 3 cshtml使用js

的_SiteLayout.cshtml部分：

<nav class="navigation"> 
     <ul class="active"> 
      <li class="unSelected"><a href="/Default" onclick="javascript:click (this);">Home</a></li> 
      <li class="unSelected"><a href="/Photography">Photography</a></li> 
      <li class="unSelected"><a href="/Webdevelopment">Web Development</a></li> 
      <li class="unSelected"><a href="/About">About</a></li> 
      <li class="unSelected"><a href="/Contact">Contact</a></li> 
    </ul> 
</nav>

的CSS部分：

.navigation .unSelected a { 
border-bottom: 2px solid #fff; 
} 

.navigation .selected a { 
border-bottom: 2px solid #3acdd5; 
}

JS部分：

$('.navigation ul li a').click(function() { 
    $('.navigation ul li a').each(function(index, element) { 
     $(this).removeClass().addClass('unSelected'); 
    }) 

    $(this).removeClass('unSelected'); 
    $(this).addClass('selected'); 
});

我wan't選擇身體鏈接，直到你被突出點擊下一個應該高亮顯示的內容等等，就像我在使用html時所做的一樣，這是設置在每個單獨的頁面上。

由於看到這將無法正常工作，我不知道是否有任何方式使這項工作只與JS工作，如果是的話如何。

如果不是，解決這類問題的最好方法是什麼？

來源

2016-09-16 Perly X

我的建議是使用剃刀引擎添加像這樣的selected和unselected類：

<li class='@(Request.Url.AbsolutePath.ToString() == Url.Action("Default") ? "selected" : "unSelected")><!-- List item content --></li>

這使您可以充分利用MVC URL路由，這樣你就不需要做任何重大的URL解析或者在任何地方硬編碼。但是，如果您將查詢字符串作爲URL的一部分，我的答案可能並不全是。

更新：我只是在我自己的項目上做了一個測試，它看起來像Request.Url.AbsolutePath不包括查詢字符串。當然，如果我查看了documentation，我會注意到它聲明查詢字符串信息不包含在內，並且沒有添加此更新

來源

2016-09-16 18:40:21 Bwolfing

這聽起來像是一個很好的方法，我意識到我需要做一些更多閱讀關於剃刀。是否有任何特定的「使用」或腳本應添加到代碼中以使其工作？如果我只是將相同的代碼重寫到我的項目中，我會在Url.Action（「Default」）的「Url」下面看到一個錯誤，說它在這種情況下不存在。 –

我會在Views文件夾中檢查'web.config'，並確保它包含''標籤''。通常這包含在'web你可能需要卸載並重新加載項目或重新加載解決方案，以改變影響intellisense – Bwolfing

完整和那裏有等丟失，添加他們，並重新安裝完整的VS我再次項目項目，但同樣的問題仍然存在：/ –

選定的菜單高亮Razor 3 cshtml使用js

回答

相關問題