jquery - добавить класс к выбранной ссылке

ProgramBox

jquery — добавить класс к выбранной ссылке

Post author:admin
Запись опубликована:10 февраля, 2023
Post category:Вопросы по программированию

#jquery #css

Вопрос:

Это должно быть просто, но я просто не могу заставить его работать

Мой список

 <div id="ctMenu">
<ul>
    <li><a href="#">WELCOME</a></li>
    <li><a href="#">ABOUT US</a></li>
    <li><a href="#">CONTACT</a></li>
</ul></div>

Мой CSS

 #ctMenu { width:1010px; margin: 20px 0 0 0; padding:20px 0 20px 0}
#ctMenu ul { margin:0; padding:0;}
#ctMenu ul li { margin-left: 0; margin-bottom:0;  display:inline;}
#ctMenu ul li a { padding: 10px 25px 9px 25px; background-color:green; text-decoration: none; color:Black; font-weight:bold; }
#ctMenu ul li a:hover {background-color:Gray; }
.selected { background-color: yellow; }

Мой jQuery

 $(document).ready(function () {
        $('#ctMenu ul li a').click(function () {
            $('#ctMenu ul li a').removeClass('selected');
            $(this).addClass('selected');
        });
    });

Я просто пытаюсь установить для css класс «.selected», когда кто-то нажимает на ссылку. Есть предложения?

РЕДАКТИРОВАТЬ: вот JSFiddle

1. в вашем jsfiddle вы не выбрали включение библиотеки jquery, поэтому класс ‘selected’ не добавляется к вашей ссылке. и, как определено в приведенных ниже ответах, ваш css является виновником того, что стиль не отображается.

2. @Sander — Спасибо! Я увидел это, изменил его, и он все еще не работал. Я думаю, что я оставил закрывающий div в jsfiddle.

3. @MarkB: Для справки обратитесь к исправлению, которое я тоже дал.

Ответ №1:

Проблема в том, что вы объявили более сильное правило CSS #ctMenu ul li a , которое переопределяет .selected . Попробуйте это правило CSS вместо:

 #ctMenu ul li a.selected { background-color: yellow; }

1. Он по-прежнему не добавляет «выбранный» класс в мою ссылку

2. ДА… это так. Я, должно быть, просто не знаю, как использовать jsFiddle или что-то в этом роде. Спасибо за вашу помощь!

3. @Marian amp; @Mark: небольшое обновление .. это изменение не требуется.. Марк упомянул, что CSS в порядке, и если он заменит строку на $('#ctMenu ul li a').removeClass('selected').removeAttr("class"); эту, тогда это сработает.. Это я протестировал в Firefox с помощью плагина firebug .

4. Шива, я предлагаю тебе сначала попытаться понять, что пытается сделать марк. Он не сказал, что с CSS все в порядке, он просто сказал, что это не работает. Предложенное вами решение не решает проблему, и, кроме того, нет необходимости избавляться от атрибута class.

5. @Interstellar_Coder: Спасибо за публикацию. Когда я тестирую его с помощью Firebug , я вижу, что атрибут класса все еще существует. Если пользовательский интерфейс работает нормально, но серверная часть отображается неправильно. Именно по этой причине я предоставил решение, в котором атрибут класса удаляется при нажатии на другую ссылку. Я чувствую, что так должно работать. Если я ошибаюсь, пожалуйста, исправьте. Я никому не указываю, что они ошибаются, просто даю свое решение, которое может помочь полностью заполнить код всех ангелов.

Ответ №2:

вот рабочая скрипка.

чтобы понять это, вы должны прочитать о специфике.

Обратите внимание, что #ctMenu ul li a.selected { background-color: yellow } это более конкретно, чем .выбрано, и именно поэтому оно работает.

Ответ №3:

На этот раз я полностью протестирован на Firebug, он работает нормально..

Замените это

 $('#ctMenu ul li a').removeClass('selected');

Для

 $('#ctMenu ul li a').removeClass('selected').removeAttr("class");

Причина этого изменения заключается в следующем: — на данный момент атрибут класса все еще существует и class="selected" меняется при нажатии на пользователя. Но если вы добавите .removeAttr("class") , то при нажатии на другую ссылку существующий атрибут класса будет удален. Ваш код будет полностью дополнен..

вы можете протестировать это с помощью FireBug в Firefox

1. Где вы добавляете «выбранный» класс в <a /> ?

2. Ваш код остается прежним. Вам нужно заменить указанную строку на ту, которую я упомянул. Попробуйте это и дайте мне знать ваши отзывы

3. имейте в виду, что этот код хорош в этой ситуации, но его нужно использовать с осторожностью … если дизайнер создает тему для вашего сайта и добавляет новый класс к определенным элементам (кто знает, по какой причине), ваш removeAttr («класс») также удалит другие классы … ядумаю, вам нужно использовать это, по крайней мере, с осторожностью..