2012-02-15 3 views
0

트위터 부트 스트랩은 현재 강조 표시 할 탐색 요소를 찾을 때 li 요소에서 active 클래스를 찾습니다.클래스 동작을 두 번째 클래스 (twitter 부트 스트랩)로 복제

나는 같은 것을 나타 내기 위해 selected 클래스를 기본값으로 사용하는 django-cms를 사용하고 있습니다 (즉, "이 탭은 현재있는 위치"입니다). 뭔가를 할 수있는 방법이 있나요 :

li 요소에 의해 생성되는
class "selected" = class "active" 

장고가-CMS를 템플릿 태그 show_menu에 의해 이루어집니다, 그래서 나는 active 클래스 자신을 추가 할 수있는 요소에 즉시 액세스 할 수 없습니다 . 당신의 요소 사용에 대한 여러 CSS 클래스를 지정할 수 있습니다

답변

0

트위터 부트 스트랩의 자신의 복사본을 호스팅 (아닌 Github에서에서 핫 링크) 다음 그렇지 않으면

.active, .selected { 
    ... 
} 

에 부트 스트랩 .active 클래스 선택기를 변경할 수있는 경우는, 또 다른 옵션이 될 수 있습니다. 이것은 클라이언트 또는 서버 측을 실행하고

.selected { 
    .active; 
} 
2

...

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

를 사용하여 설치 한 경우이 사이트 패키지 ../menues/templates/menu에서 장고-CMS 메뉴 템플릿을 찾을 수 있습니다

{% 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 %} 

Unfor 'selected' 클래스로 렌더링되는'li' 엘리먼트는'li' 엘리먼트에 추가 클래스를 추가하는 쉬운 방법이 없는지 django-cms 템플릿 태그에 의해 (말하자면) 뒤에서 만들어집니다. 나는 이것을 질문에 포함해야했다. – mrmagooey

+1

jquery를 사용할 수 있다면 "selected"클래스가있는 모든 요소를 ​​찾아서 "active"클래스를 추가 할 수 있습니다. –

1

당신은 "활성" "선택"을 찾아 대신 할 수있는 부트 스트랩 믹스 인을 수정할 수는 - 불필요한와 마크 업의 혼란을 친다 수업. LESS CSS를 사용하는

0

찾고있는 상속의 유형을 지원 할 수 있습니다 당신은 클래스를 복제 할 필요가 없습니다 당신이 당신의 자신의 클래스를 생성하고 적용됩니다해야 할 일은 모든 원하는 스타일을 .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 클래스에서 모든 스타일을 적용합니다.

0

내가 찾은 가장 쉬운 방법은, show_menu

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

그리고 bootstrap_menu.html에 대한 원래 장고-CMS 메뉴 템플릿을 취할 수있는 사용자 정의 메뉴 템플릿을 지정 복사하고 있는지에게 그것을 확인하는 것입니다 생성 너무 '활성 "클래스 : 당신이 핍/easy_install을/등

관련 문제