2013-08-29 5 views
-2

CSS:Как изменить класс элемента с JQuery на «вложенный класс»?

#logo-container { 
    position: fixed; 
    right:5px; 
    .home-page { 
    /* homepage style */ 
    } 
    .content-page { /* <-- I want to change the $element's class to this class */ 
    margin-top: 78px; 
    } 
} 

JQuery (изменить #logo-container «s класс .content-page): Это, кажется, не работает ... Любые идеи

jQuery(this).prev('#logo-container').attr('class', '#nav-container .content-page'); 

?

EDIT: Проблема, похоже, в том, как я ссылаюсь на .content-page. Я попробовал следующая и ни один, кажется, работает:

'content-page' '.content-page' 'logo-container content-page' '#logo-container .content-page' '#logo-container.content-page'

+0

Спасибо, но это не сработало. Также '' .content-page'' и ''# nav-container.content-page' не работали. –

+0

'document.getElementById ('logo-container'). ClassName =" content-page "'. потому что идентификаторы уникальны. –

ответ

0

Попробуйте

$(this).find('div').removeClass('logo-container').addClass('content-page'); 
0

Вы можете использовать addClass, чтобы добавить новый класс к DOM элементу :

$('#logo-container').addClass('content-page')

Если вы хотите удалить старый класс и добавить новую, используйте toggleClass

$('#logo-container').toggleClass('old-class content-page')

+0

Это не проблема добавления или переключения класса, но как я могу ссылаться на «вложенный» класс? –

+0

Вы просто ссылаетесь на него по имени класса (например, 'content-page'). Но вам нужно настроить CSS, поскольку тот, который в настоящее время предоставлен, недействителен. Правильное определение CSS в вашем файле CSS скорее всего '# logo-container.content-page'. См. Http://stackoverflow.com/questions/3720844/nested-css-rules, чтобы узнать больше о правильном способе определения того, что CSS – dcro

+0

Спасибо! Слишком плохой CSS не позволяет вложенности таким образом, чтобы дочерний css id/class мог наследовать стили из своего родителя. (Подобно тому, как классы в Java/C++ наследуют атрибуты/функции из его родительского класса.) –

0

попробовать

jQuery(this).prev('#logo-container').toggleClass('content-page'); 
0
# //this is a sign for an id 

удалить идентификатор, вы должны использовать removeAttr ('id')

так что, возможно, вам нужно что-то вроде thi s

$('#logo-container').addClass('content-page').removeAttr('id'); 
+0

Что ???? ... Я не пытаюсь изменить идентификатор .... –

+0

ваши слова: «JQuery (to измените класс # logo-container на .content-страницу): «Итак, что такое класс # logo-container?а также ваши слова: «jQuery (this) .prev ('# logo-container'). attr ('class', '# nav-container .content-page'); поэтому вы пытаетесь сделать что-то с id. класс никогда не будет слушать # - в вашем CSS есть «}» до большого количества – caramba

+0

, если вы Google для «jQuery change class of element», вы найдете множество информации. для меня ваш вопрос не так ясен, чтобы точно увидеть, что ваша проблема – caramba

-1
$(this).prev('#logo-container').addClass('content-page') 

BTW, Что за "# нав-контейнер"?

1

Это код, который вы ищете:

div.a { 
    color: red; 
} 

div.a div.b { 
    /* Inherits color from div.a */ 
    font-weight: bold; 
} 

Вы должны проверить этот вопрос: nested css rules

Смежные вопросы