想要更改当前页面的选项卡图像

Question

我有一个 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;
}

Answer 1

在这个布局中，似乎不可能仅使用 css，因为您的 'li' 或 'a' 没有类似 id="current" 的内容。

顺便说一句，使用这种样式，您可以在“span”顶部有一个带有选项卡的“a”，在带有选项卡的“li”顶部有一个选项卡。我说有点过分了？

当您添加当前的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;

}

Answer 2

@Shehzad009；在 a 标签中提供您的图像对于当前页面，您可以根据页面为其创建一个类，例如.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>

Answer 3

这是一个 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>