Дублирование поведения класса во второй класс (начальная загрузка Twitter)

Question

Twitter-bootstrap в настоящее время ищет класс active для элемента li, когда решает, какой элемент навигации выделить.

Я использую django-cms, который по умолчанию использует selectedкласс, чтобы указать то же самое (то есть "эта вкладка находится там, где вы сейчас находитесь").Есть ли способ сделать что-то вроде:

class "selected" = class "active"

Элемент li, генерируемый django-cms, выполняется тегом шаблона show_menu, поэтому у меня нет немедленного доступа к элементудобавить класс active сам.

Answer 1

вы можете указать несколько классов CSS для ваших элементов ...

<div class="selected active">
    ...
</div>

Answer 2

Вы можете изменить загрузочный миксин, чтобы он смотрел «выбранный» вместо «активный» - он превосходит помехи в вашей разметке ненужными классами.

Answer 3

Самый простой способ, который я нашел, это указать пользовательский шаблон меню в show_menu

{% show_menu 0 100 0 0 "bootstrap_menu.html" %}

А для bootstrap_menu.html вы можете взять оригинальный шаблон меню django-cms, скопировать его и убедиться, что он также создает класс 'active':

{% load menu_tags %}
{% for child in children %}
    <li class="{% if child.selected %}selected active{% endif %}{% if child.ancestor %}ancestor{% endif %}{% if child.sibling %}sibling{% endif %}{% if child.descendant %}descendant{% endif %}">
        <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>
        {% if child.children %}
            <ul>
                {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
            </ul>
        {% endif %}
    </li>
{% endfor %}

Вы можете найти шаблон меню django-cms в ../menues/templates/menu в пакетах сайта, если вы установили с помощью pip / easy_install / etc ..

Answer 4

Вам не нужно дублировать класс, все, что вам нужно сделать, это создать свой собственный класс и применить все стили, которые вы хотите вместе с классом .active, например,

.pagination a:hover, .pagination .active a,  .pagination .selected a {
  background-color: #f5f5f5;
}
.pagination .active a, .pagination .selected a {
  color: #999999;
  cursor: default;
}

Таким образомкласс .selected также будет применять все стили из класса .active.

Answer 5

Если вы размещаете свою собственную копию Bootstrap Twitter (вместо горячей ссылки из Github), вы можете изменить селектор класса Bootstrap .active на

.active, .selected {
    ...
}

В противном случае другим вариантом может быть использование МЕНЬШЕ CSS . Это может быть запущено на стороне клиента или сервера и поддерживает тип наследования, который вы ищете

.selected {
    .active;
}