Note that there are some explanatory texts on larger screens.

plurals
  1. POWant to change the tab image for the current page
    primarykey
    data
    text
    <p>I have a django web app that has a horizontal navagation with tabs going horizontally. Each link looks for an image tab called tab.png. I've also included a hover property as well.</p> <p>Now, I want to change tab image for the selected tab menu (current page). So whatever the current page is, change the tab image to tab2.png. The only thing is I am not sure how to do this properly.</p> <p><strong>base_menu.html</strong></p> <pre><code>{% extends "base.html" %} {% block content %} &lt;ol id="toc"&gt; &lt;li&gt;&lt;a href="{% url mmc.views.return_clients %}"&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="{% url mmc.views.quote_step1 %}"&gt;&lt;span&gt;Create quote/order&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="{% url mmc.views.search_item %}"&gt;&lt;span&gt; Item Search&lt;/a&gt;&lt;/span&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="{% url mmc.views.order_list %}"&gt;&lt;span&gt;Storage orders&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;/ol&gt; &lt;div id="right_content"&gt; {% block right_content %} {% endblock %} &lt;/div&gt; {% endblock %} </code></pre> <p><strong>base.css</strong></p> <pre><code>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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload