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

Как я могу удалить жирный шрифт из ранее нажатых ссылок при нажатии новой ссылки?

<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>

$(document).ready(function(){
    $("a").click(function(){
        $(this).css("font-weight","bold");
    });
});
2
billybobjones 14 Дек 2015 в 06:36

3 ответа

Лучший ответ

Я бы предложил вместо этого переключить класс.

По сути, он удаляет класс active из всех родственных элементов, а затем использует метод .end(), чтобы выбрать начальный элемент и добавить класс active:

$("a").click(function() {
  $(this).siblings().removeClass('active').end().addClass('active');
});
.active {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>
4
Josh Crozier 14 Дек 2015 в 03:39

Вы можете использовать .not(); и переключать класс, используя ToggleClass(); вместо addClass();

$(document).ready(function(){
    $("a").click(function(){
        $('a').not($(this)).removeClass('active');
        $(this).addClass('active');
    });
});
.active{
  font-weight : bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">link A</a>
<a href="#">link B</a>
<a href="#">link C</a>
<a href="#">link D</a>
4
Mohamed-Yousef 14 Дек 2015 в 03:44

Я думаю, что ответ Джоша Крозье является лучшим решением для этого и его следует рекомендовать. Но просто хотел поделиться, если кто-то все еще хочет сделать это без использования класса, это не невозможно сделать:

$("a").click(function() {
   $(this).siblings().css("font-weight","normal").end().css("font-weight","bold");
});
1
Tᴀʀᴇǫ Mᴀʜᴍᴏᴏᴅ 14 Дек 2015 в 04:09