|
Не выдергивается первый символ из выражения getAttribute('href')
Добрый вечер, гуру))) :)
Я новичок в этом языке, но старательно пытаюсь изучить. Возникла проблема, и я ничего не могу найти, подскажите плиз. Есть такая строчка:
document.querySelector(this.getAttribute('href')).classList.add('active');
Она находит элемент с href, и элементу, у которого такой же id добавляет класс 'active'. Это работает, но я хочу немного изменить. Надо чтобы находился href, к значению этого href добавлялись символы 'sm', и уже элементам с id=sm+href добавлялся класс 'active'. И все тут я села))) Пишу:
document.querySelector('sm'+this.getAttribute('href')).classList.add('active');
И ничего не получается, вернее получается, что нет такого элемента 'sm#значениеhref', и это понятно. Получается мне надо удалить символ # из значения href. Пробовала через str, через регулярные выражения, но не получается. Подскажите, ткните носом, буду очень благодарна. |
'sm'+this.hash.substr(1)
|
alert('sm' + '#you_id'.slice(1));
|
Спасибо большое.
А вот теперь вылезла ошибка: Uncaught TypeError: Cannot read property 'classList' of null :blink: Можно я приложу весь свой малюсенький код? может подскажете откуда эта ошибка(
<script type="text/javascript">
var btn = document.querySelectorAll('.btn'),
el = document.querySelectorAll('.el');
Array.prototype.forEach.call(btn, function(curr){
curr.addEventListener('click', function() {
Array.prototype.forEach.call(el, function(curr){
curr.classList.remove('active');
});
document.querySelector('sm'+(this.getAttribute('href').slice(1))).classList.add('active');
return false;
}, false);
});
</script>
|
Heny,
как выглядит тег sm? может так '#cm'+... если это id |
Выглядит так:
Тут располагаются картинки со стилем el, у которого display: none;
<div id="sm1013" class="el"><img src="/konf3d/sm1013.png" /></div>
<div id="sm1015" class="el"><img src="/konf3d/sm1015.png" /></div>
<div id="sm1019" class="el"><img src="/konf3d/sm1019.png" /></div>
А тут располагаются типа кнопочки, при нажатии на которые к стилю el добавляется active, и display становится block:
<div class="panel2">
<a class="btn" href="#1013"><img src="/konf3d/1013.png"></a>
<a class="btn" href="#1015"><img src="/konf3d/1015.png"></a>
<a class="btn"href="#1019"><img src="/konf3d/1019.png"></a>
</div>
Смысл в том, что потом будет блок с приставкой 'sp' и другие, а кнопочки с href="" останутся теми же самыми |
Цитата:
Помогло так:
document.querySelector('#sm'+this.getAttribute('href').slice(1)).classList.add('active');
Надо же как просто оказалось!!!! |
И еще маленький глупенький вопросик. Как сделать так, чтобы при нажатии на
<a class="btn" href="#1013"><img src="/konf3d/1013.png"></a>, страница не прокручивалась до самой ссылки-кнопки? Так как <div id="sm1013" class="el"><img src="/konf3d/sm1013.png" /></div> с которым происходят изменения находится выше |
Heny,
отменить переход по ссылке curr.addEventListener('click', function(event) {event.preventDefault(); |
Цитата:
|
| Часовой пояс GMT +3, время: 16:49. |
|