Хотите изменить изображение вкладки для текущей страницы - PullRequest
Новая
       4

Хотите изменить изображение вкладки для текущей страницы

0 голосов
/ 06 сентября 2011

У меня есть веб-приложение django, которое имеет горизонтальную навигацию с горизонтальными вкладками.Каждая ссылка ищет вкладку изображения с именем 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;
}

Ответы [ 3 ]

0 голосов
/ 06 сентября 2011

@ 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>
0 голосов
/ 06 сентября 2011

здесь строка 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>
0 голосов
/ 06 сентября 2011

В этом макете кажется невозможным использование только CSS, так как у вашего 'li' или 'a' нет чего-то вроде id = "current".

Кстати, используя этот стиль, вы можете иметь«a» с вкладкой в ​​верхней части «span» с вкладкой в ​​верхней части «li» с вкладкой.Kinda overkill id говорите?

Это единственный css, который вам нужен при добавлении текущего li ... все остальные фоны не нужны. 

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;

}
...