突出顯示當前側邊欄中的當前菜單項

我使用的是django和Twitter Bootstrap。我目前的觀點類似於examples provided之一。看看這個例子，我們可以想象用戶點擊邊欄中的一個鏈接可以看到不同的視圖，每個視圖都使用相同的側邊欄框起來。人們會想象選中鏈接將被高亮顯示，就像使用代碼的例子：突出顯示當前側邊欄中的當前菜單項

<li class="active"><a href="/sample/link/here/">Link</a></li>

活動類需要被連接到正確的菜單項。我該如何將這個「活動」類分配給正確的菜單項？本來，我嘗試使用一個變量，從我的觀點與jQuery的指派方式：

$(document).ready(function() { 
    $("#{{ current_view }}_nav").addClass('active'); 
}); 

<li id="linkone_nav"><a href="/sample/link/here/">Link</a></li>

這似乎很麻煩，但。它要求我將ID從視圖傳遞給模板。大量的ID也可以管理。有沒有更好的/更喜歡的方式來分配這個活動類？

來源

2012-08-16 Ed.

我認爲你的示例代碼中的href使用#是混淆的問題。我假設你的真實場景是實際的真實鏈接，並根據活動URL自動突出顯示它們。如果這是正確的，那麼就去做：

{% url something as url %} 
<li{% if request.path == url %} class="active"{% endif %}><a href="{{ url }}">Link1</a></li>

其中，「東西」是一個URLPATTERN或虛線路徑到視圖等的名稱，這個假設你倒車的URL，很明顯，因此，如果您使用靜態URL「重，你只是硬編碼：

<li{% if request.path == "/my/full/url/path/" %} class="active"{% endif %}><a href="/my/full/url/path/">Link1</a></li>

來源

2012-08-16 17:31:44

啊，這更多的是我正在尋找的方式。抱歉，模棱兩可。剛剛從引導源複製，以供參考。我會給這一槍！ – 2012-08-16 17:40:13

製作一個包含片段爲您的菜單：

<li class="{% if opt=='link1' %} active{% endif %}"><a href="#/?opt=link1">Link1</a></li> 
<li class="{% if opt=='link2' %} active{% endif %}"><a href="#/?opt=link2">Link2</a></li> 
<li class="{% if opt=='link3' %} active{% endif %}"><a href="#/?opt=link3">Link3</a></li> 
...

包括在您的基本模板：

{% include "menu.html" with opt=request.GET.opt %}

你不需要使用$（文件）。就緒（.. 。）如你所見。

不要忘了請求添加到您的TEMPLATE_CONTEXT_PROCESSORS：

TEMPLATE_CONTEXT_PROCESSORS = (
    # ... 
    'django.core.context_processors.request', 
    # ... 
)

來源

2012-08-16 15:52:12 sergzach

FWIW，在Twitter的引導頁面本身使用Scrollspy plugin提供了這個功能。

否則，您可以只聽菜單中的點擊事件。

$('.nav').on('click', 'li:has(a[href^="#"])', function (e) { 
    $('.nav li').removeClass('active'); 
    $(this).addClass('active'); 
});

來源

2012-08-16 15:58:05 merv

感謝。這雖然不太適用。我的鏈接不是同一頁面上的錨點。他們引用了共享相同菜單的其他頁面（如果有意義的話）。 – 2012-08-16 16:40:36

如果你組織你的項目爲base.html模板由其他模板，如延長appname/pagename.html，您可以使用以模板爲中心的方法來突出顯示活動導航元素。

這種方法爲您提供了一些解耦優勢，我在回答結束時已經詳細記錄了這些優點。

我發現這種方法對處理大部分或全部網站中保持不變的廣泛導航項目非常有用。對於更詳細的導航元素，這可能不是一個合適的解決方案，例如呈現從您的數據存儲中收集的動態項目列表。

在你base.html模板，塊添加到每個導航元素，給人獨特的名字塊：

<ul class="nav"> 
    <li class="{% block navbar_class-home %}{% endblock %}"> 
    <a href="#">Home</a> 
    </li> 
    <li class="{% block navbar_class-about %}{% endblock %}"> 
    <a href="#">About</a> 
    </li> 
    <li class="{% block navbar_class-pricing %}{% endblock %}"> 
    <a href="#">Pricing</a> 
    </li> 
</ul>

在你appname/pagename.html模板，如果你想要的導航元素之一出現活躍，覆蓋作爲內容使用active適當的塊。例如，要突出「關於」項：

{% block navbar_class-about %} active {% endblock %}

當您使用將呈現模板視圖，它會呈現這樣的：

<ul class="nav"> 
    <li class=""> 
    <a href="#">Home</a> 
    </li> 
    <li class=" active "> 
    <a href="#">About</a> 
    </li> 
    <li class=""> 
    <a href="#">Pricing</a> 
    </li> 
</ul>

這提供了沒有按」初始渲染不依賴於JavaScript。（您可以使用JavaScript，如果你正在做一個單頁的應用程序修改導航欄班到位。）

對於許多（但不是全部）的情況下，這可以從視圖邏輯較好的分離演示：

您可以修改視圖以將站點導航數據附加到模板上下文，但這樣會強烈地將演示文稿耦合到視圖層，並且使創建可重用應用程序或集成第三方應用程序變得更加困難。

該視圖已經選擇了一個已命名的模板，這意味着您已經將一些與導航相關的信息傳遞給模板層。這可能是你需要的一切。
您可以使用模板上下文處理器來獲取有關視圖的一些信息，但這只是將強耦合移動到系統的另一層，而不是留在模板層中。

來源

2012-12-14 17:07:41 gldnspud

更好的解決方案，用較少的代碼。用Bootstrap很好的炒作。只需更改「addClass」查詢來選擇您的菜單項。

於JavaScript，創建此功能：

var highlight_menu = function(path) { 
    /* Highlight current link */  
    $('.nav li').removeClass('active'); 
    $('.nav li:has(a[href="' + path + '"])').addClass('active') 
};

在base.html文件，調用JS功能與當前路徑：

<script> 
    highlight_menu('{{request.path}}'); 
</script>

來源

2013-07-24 21:15:17 jordiburgos

突出顯示當前側邊欄中的當前菜單項

回答

相關問題