-1

Почему не работает 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;
}
1
  • :focus в первом случает срабатывает, т.к. есть атрибут tabindex. Во втором случае нужно ставить селектор :target.
    – NeedH8
    4 дек 2018 в 13:04

3 ответа 3

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-ссылку

введите сюда описание изображения

3
  • Что то у вас не работает, потому что эфект у меня такой же без квери.
    – AndSol
    4 дек 2018 в 12:53
  • Какой эффект?, приложил скрины работы к ответу
    – nicolaa
    4 дек 2018 в 13:01
  • я серьезно говорю открыл даже в новой окне все равно не работает. но нашел решение другое вы пожете посмотреть ниже
    – AndSol
    4 дек 2018 в 13:05
0

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

3
  • HTML 5 это допускается, но это не решает проблему.
    – AndSol
    4 дек 2018 в 12:48
  • 1
    у меня работает, проверил ваш код на jsfiddle jsfiddle.net/8jy97tx3
    – boneskhv
    4 дек 2018 в 12:52
  • у меня чето не работает)
    – AndSol
    4 дек 2018 в 12:56
0

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

было

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

стало

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

}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.