Удалить текстовое оформление, когда стиль div не отображается до тех пор, пока не будет запущено событие?
Я работаю над оптимизацией своего сайта для мобильных устройств, и у меня возникают проблемы с отображением меню так, как я хочу... У меня возникают проблемы с удалением подчеркивания из моих ссылок.
При загрузке страницы в заголовке отображается логотип компании, кнопка меню и номер телефона. Когда пользователь нажимает кнопку меню, я хочу, чтобы на экране телефона отображались кнопки, связывающие их с другими страницами. Это работает, но я не могу избавиться от подчеркивания в ссылках.
function dispmenu(){
document.getElementById('toolbar').style.display='block';
document.getElementById('menubutton').style.display='none';
document.getElementById('contact_bar_phone').style.display='none';
document.getElementById('logo').style.display='none';
}
var buttonsmob = `
<span id='toolbar' style='display:none;'>
<a href='https://www.home.com'><div class='toolbarbutton'>Home</div></a>
<a href='Locations.php'><div class='toolbarbutton'>Locations</div>
<a href='ContactUs.php'><div class='toolbarbutton'>Contact Us</div></a>
<div onclick='closemenu()' class='toolbarbutton'>Close Menu</div>
</span>`;
Я попытался добавить text-decoration: none; в css в .toolbarbutton a{.toolbarbutton{ и
function dispmenu()
{
document.getElementById('toolbar').style.display='block';
document.getElementById('toolbar').style.text-decoration='none';
}
но ничего из этого не работает. Я чувствую, что это потому, что элемент настроен на отображение: нет при загрузке страницы, но не знаю, как это исправить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
вы должны использовать:
a {
text-decoration: none;
}
Спасибо. Это сработает для этой проблемы, но вызовет проблемы для других ссылок на сайте.
Я предлагаю вам, если меню предназначено только для мобильных устройств, использовать медиа-запросы, чтобы внести это изменение.
медиа-запрос — это команда, которую вы можете ограничить размером экрана и применить к свойствам css без использования java-скрипта.
@media (max-width: 600px) {
.toolbarbutton a {
text-decoration: none;
}
}
Вот руководство, который может вам помочь.
Используйте этот код:
function dispmenu()
{
document.getElementById('toolbar').style.display='block';
document.querySelectorAll('#toolbar a').forEach(link =>{
link.style.textDecoration = 'none';
})
}
Благодарю вас! Это то, что мне было нужно!
свойство css в js имеет другое имя (см. CamelCase textDecoration)
function dispmenu()
{
document.getElementById('toolbar').style.display='block';
document.getElementById('toolbar').style.textDecoration='none';
}
Вы должны немного объяснить свой ответ. Большинство людей знают, что это css, но новые разработчики не будут знать, что вы пытаетесь порекомендовать.