Блог

Главная - Вопросы по программированию - изменить стиль одного элемента без изменения другого?

изменить стиль одного элемента без изменения другого?

#javascript #jquery #css #class #styles

#javascript #jquery #css #класс #стили

Вопрос:

извините, вопрос не имеет смысла, но я объясню. У меня есть две гиперссылки

 <a href="" class="menu-link">home</a>
<a href="" class="menu-link">blog</a>

я хочу применить этот стиль

 <style>
.menu-link{color:#000;}
</style>

но применимо только к <a href="" class="menu-link">home</a> тому, как это можно сделать, кроме фактического изменения класса, как показано ниже

 <a href="" class="menu-link-1">home</a>
<a href="" class="menu-link-2">blog</a>

Ответ №1:

Если вы не можете изменить разметку, чтобы добавить дополнительный класс, вы можете выбрать элемент по его href атрибуту, предполагая, что он есть:

 a.menu-link[href='home.html'] {
  color: #000;
}

Вот живой пример.

Ответ №2:

Вы можете назначить несколько классов одному элементу.

 <a href="" class="menu-link home">home</a>
<a href="" class="menu-link">blog</a>

все, что вам нужно, это добавить пробел

 <style>
.menu-link.home{color:#000;}
</style>

Ответ №3:

Возможно, это решение будет соответствовать вашим потребностям.

 <a href="" class="menu-link black">home</a>
<a href="" class="menu-link">blog</a>

<style>
.menu-link{}
.black {color:#000;}
</style>

Ответ №4:

Предполагая, что вы не можете / не хотите изменять фактическую разметку, попробуйте это (jQuery)

 jQuery(function($) {
    var home = $("a.menu-link:contains('home')");

    // change style
    home.css("color", "#000");

    // add class
    home.addClass("other-class");

    // remove class
    home.removeClass("menu-link");

    // add / change attributes
    home.attr("id", "some-id");        
});

Комментарии:

1. вместо .css("color", "#000"); возможно ли применить идентификатор или изменить класс?

2. @user1010031 определенно. Как только у вас есть элемент с помощью селектора, вы можете делать с ним все, что захотите

3. как? что такое actuall jquery для этого?

4. @user1010031 Если вам не нужно поддерживать IE6 и ваши ссылки на самом деле имеют href атрибуты, ответ Майкла намного приятнее

Ответ №5:

Alt 1

Вы могли бы добавить style атрибут к этому якорю:

 <a href="" class="menu-link" style="color:#000;">home</a>

Alt 2

Или вы могли бы добавить id к этому якорю:

 <a href="" class="menu-link" id="specialstyle">home</a>

и заменить .menu-link на #specialstyle в вашем css.

Alt 3

Или вы могли бы дать этому якорю дополнительный class :

 <a href="" class="menu-link menu-link-special">home</a>

и заменить .menu-link на .menu-link-special в вашем css.

Ответ №6:

Вы можете добавить другой класс menu-link-1 с нужным вам стилем:

 <style>a.home { color: #000; }</style>
<a href="" class="menu-link-1 home">home</a>
<a href="" class="menu-link-2">blog</a>

редактировать: очевидно, что если бы я прочитал вопрос, я бы заметил, что автор не хотел менять классы..

Ответ №7:

Я думаю, что ссылка «home» является первой в этой последовательности, так почему бы не использовать 

 .menu-link { color: <your_default_color>; }
.menu-link:first-child { color: #000; }