想要更改當前頁面的標籤圖像

我有一個django web應用程序，它具有橫向導航欄，並且水平顯示標籤頁。每個鏈接都會查找名爲tab.png的圖像選項卡。我還包括一個懸停屬性。想要更改當前頁面的標籤圖像

現在，我想更改選定選項卡菜單（當前頁面）的選項卡圖像。因此，無論當前頁面是什麼，將標籤圖像更改爲tab2.png。唯一的是我不知道如何正確地做到這一點。

base_menu.html

{% extends "base.html" %} 

{% block content %} 

<ol id="toc"> 
     <li><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li> 
     <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li> 
     <li><a href="{% url mmc.views.search_item %}"><span> Item Search</a></span></li> 
     <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li> 
</ol> 

<div id="right_content"> 
     {% block right_content %} 

     {% endblock %} 
</div> 
{% endblock %}

base.css

ol#toc { 
    height: 2em; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

ol#toc li { 
    background:#ffffff url(../images/tab.png); 
    float: left; 
    margin: 0 1px 0 0; 

} 

ol#toc span { 
    background: url(../images/tab.png) 100% 0; 
    display: block; 
    line-height: 2em; 
    padding-right: 10px; 
} 

ol#toc a { 
    color: #000000; 
    height: 2em; 
    float: left; 
    text-decoration: none; 
    padding-left: 10px; 
} 

ol#toc a:hover { 
    background: url(../images/tab2.png); 
    text-decoration: underline;` 

} 

ol#toc a:hover span { 
    background: url(../images/tab2.png) 100% 0; 
    background-position: 100% -120px; 
}

來源

2011-09-06 Shehzad009

在這種佈局中它似乎只使用CSS，因爲你的 '禮'，或者是可能的 'A'沒有像id =「當前」的東西。

順便說一句，使用這種風格，你可以在'span'頂部帶有一個標籤的'a'，在'li'頂部有一個帶有標籤的標籤。有點矯枉過客ID說？

這是您添加當前li時所需的唯一css ...所有其他背景都不需要。

ol#toc li { 
    background:#ffffff url(../images/tab.png); 
    float: left; 
    margin: 0 1px 0 0; 

} 
ol#toc li#current { 
    background:#ffffff url(../images/tab2.png); 
    float: left; 
    margin: 0 1px 0 0; 

}

來源

2011-09-06 10:33:34

的問題是，如果我加入'ID =「當前」''到

Home

'，它會使這個環節有'tab2.png，regradless如果當前頁面或沒有。有沒有辦法說如果它不是當前頁面使用tab.png？ – Shehzad009

您需要的唯一代碼就是我的回答 –

好的，我已經完成了您告訴我要做的事情。問題是，現在發生的事情是鏈接「

Home

'有一個tab2.png圖像爲其選項卡。 Howeverif我去了一個不同的頁面，它會說它仍然是當前頁面（即標籤不會變回tab1.png圖片）。我如何克服這個問題？ Jscript，另一個模板？ – Shehzad009

@ Shehzad009;在a標籤&爲current page您可以爲它創建一個類，如.current $ \ &根據頁面chane。

ol#toc a{background: url(http://dummyimage.com/200x32/000/fff&text=normal) 0 0;} 
ol#toc a:hover, .current {background: url(http://dummyimage.com/200x32/000/454545&text=hover) 0 0;}

HTML

<ol id="toc"> 
     <li class="current"><a href="{% url mmc.views.return_clients %}"><span>Home</span></a></li> 
     <li><a href="{% url mmc.views.quote_step1 %}"><span>Create quote/order</span></a></li> 
     <li><a href="{% url mmc.views.search_item %}"><span> Item Search</a></span></li> 
     <li><a href="{% url mmc.views.order_list %}"><span>Storage orders</span></a></li> 
</ol>

來源

2011-09-06 10:52:45 sandeep

這裏是一個javascript行設置「當前」類。

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#toc >li >a").each(function (key,object) { if($(object).attr("href") == document.location.pathname) $(object).addClass("current");}); 
    }); 
</script>

來源

2011-09-06 11:31:13 fanlix

想要更改當前頁面的標籤圖像

回答

相關問題