Почему не работает id у линка?

164
27 мая 2019, 22:00

Почему не работает id у линка? Мне нужно что бы при нажатии на ссылку href="#2" срабатывал focus на ссылке с id=2.(нужно что бы сделать якорь)

Eсли убрать id то фокус работает, потому что он подключается через класс. В чем причина?

<span class="notsun" tabindex="0">Так работает если нажать сюда</span><br>
<a class="notsun" href="#2">Так не работает если нажать сюда url</a>
<br>
<p class="to-be-changed">Здесь просто текст</p>
<a class="to-be-changed" id="2"  href="#">А это ссылка с id 2 </a>

.notsun:focus~ .to-be-changed {
background: #000;
    color: red;
}
Answer 1

Можно использовать jq

$( ".notsun" ).click(function() { 
  var attr = $(this).attr('href').slice(1);//Получаем значение из атрибута href и удаляем первый символ 
  $('#'+attr).addClass('active');//Добавляем класс active 
  setTimeout(function(){$('#'+attr).removeClass('active');},200);//Через timeout удаляем класс, для наглядности выбора 
});
.to-be-changed.active { 
  background: red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<span class="notsun" tabindex="0">Так работает если нажать сюда</span><br> 
<a class="notsun" href="#2">Так не работает если нажать сюда url</a><br> 
<a class="notsun" href="#3">Показать ссылку с ид 3</a><br> 
<a class="notsun" href="#4">Показать ссылку с ид 4</a><br> 
<br> 
 
<p class="to-be-changed">Здесь просто текст</p> 
<a class="to-be-changed" id="2"  href="#">А это ссылка с id 2 </a><br> 
<a class="to-be-changed" id="3"  href="#">Ссылка с ид 3</a><br> 
<a class="to-be-changed" id="4"  href="#">Ссылка с ид 4</a><br>
Нажатие на первые ссылку

2-ссылку

3-ссылку

Answer 2

Идентификатор должен обязательно начинаться с латинского символа. В вашем случае id это цифра, что является недопустимым.

Answer 3

В общем решение оказалось проще.

было

.notsun:focus~ .to-be-changed {
background: #000;
    color: red;
}

стало

.to-be-changed:focus {
background: #000;
    color: red;
}
READ ALSO
Смена цвета текста при скролле
HTML

Смена цвета текста при скролле

У меня есть header

 162
Ссылка на viber не работает на устройстве mac
HTML

Ссылка на viber не работает на устройстве mac

Подскажите, почему данная ссылка работает только, если установлен вайбер на устройство? <a href="viber://chat?number=+1234567890">viber</a> Если не установлен...

 150
Задержка перед переходом по ссылке
HTML

Задержка перед переходом по ссылке

Вообщем есть событие load, которое после полной загрузки страницы делает плавное opacity body,html с 0 до 1, вопрос в том что-бы сделать каждый клик по любой...

 165
Стилизация ошибки required
HTML

Стилизация ошибки required

Сейчас при ошибке вылетает вот такое окно

 147