Динамически добавлять return false ко всем якорям с помощью # (с javascript или jquery)
У меня есть следующее меню в HTML:
На данный момент у меня есть жестко запрограммированныйonclick = "return false" прямо в HTML (см. Ниже). Я читал, что это плохая практика. Я хотел бы знать, как добавить return false (или e.preventdefault) ко всем привязкам с href # с jquery и / или javascript.
<div id = "bar" >
<label id = "toggle-label" for = "toggle-1">Menu</label>
<input type = "checkbox" id = "toggle-1">
<ul class = "menu">
<li><a href = "/">Home</a></li>
<li><a href = "#" onclick = "return false;">Item with sub</a>
<ul>
<li><a href = "https://google.com" target = "_blank">Sub 1.1</a></li>
<li><a href = "/something">Sub 1.2</a></li>
</ul>
</li>
<li><a href = "#" onclick = "return false;">Item with sub-sub</a>
<ul>
<li><a href = "/something">service-1</a></li>
<li><a href = "#" onclick = "return false;">Item with sub</a>
<ul>
<li><a href = "/something">sub sub 1</a></li>
<li><a href = "/something">sub sub 2</a></li>
<li><a href = "/something">sub sub 3</a></li>
</ul>
</li>
<li><a href = "/electrical">Electrical</a></li>
</ul>
</li>
<li><a href = "/pricing">Pricing</a></li>
<li><a href = "/contact">Contact Us</a></li>
</ul>
</div>
Когда это меню просматривается на маленьких экранах, щелчок, например, Товар с суб заставит страницу прокручиваться вверх из-за # в теге привязки.
Хорошо, тогда следующий вопрос будет заключаться в том, какова цель создания ссылок на эти элементы, если они не собираются ничего делать?
Хороший вопрос. Только Товар с суб и Товар с подпунктом должны иметь #. Остальные должны пойти, например, в /contact и тому подобное.
Я думаю, вы упускаете мою точку зрения. Вы размещаете якорную разметку на своей странице, но эффективно убиваете их от каких-либо действий. Единственная возможная причина, по которой вы это сделаете, - если бы вы использовали теги привязки, чтобы соответствовать какому-то стилю css по умолчанию на странице для ссылок. В этом случае, вместо того, чтобы «исправлять» ссылки, скорее всего, было бы лучше не делать их ссылками и использовать css для стилизации их так, как вы хотите, чтобы они выглядели.
Кажется, вам не хватает точки мой. Я изменил пример выше, чтобы продемонстрировать, что только несколько пунктов меню получают href #. Убивают только тех.
Таким образом, только они не будут ссылками, что устранит необходимость их убивать. Вы еще не объяснили, почему все списки обязательно, без исключения, всегда должны быть ссылками. Даже те, которые никогда не должны использоваться в качестве ссылки
Я видел много руководств, в которых учат устанавливать для href элемента a значение #, если это просто родительский элемент, который не должен никуда связываться, а действует только как кнопка, чтобы показать его дочерним элементам. Например, когда вы составляете меню в Wordpress.
Это все еще не отвечает Зачем, вы в первую очередь заставляете элементы быть ссылками. Установка href = "#" является допустимым случаем, если вы собираетесь прикрепить к ним логику страницы, например, вы нажимаете родительскую ссылку, и в результате у вас есть javascript, который обнаруживает вложенную вспомогательную логику или что-то в этом роде. Таким образом получается смысл. На это есть причина. В этом случае нет причины, по которой это должны быть ссылки в вашей разметке. Вы не придаете им никакой лишней логики. Единственная дополнительная логика, которую вы добавляете, - это убивать их как ссылки.
Да, точно. Это допустимый случай использования href = #. Но опять же, ваша логика не делает этого. Он вообще не использует ссылки.
Вы видели, что я изменил код в своем вопросе, чтобы показать, что в моем меню делает есть действительные ссылки?
Мы не говорим о настоящих ссылках. Речь идет о ссылках href = "#". То, что у вас есть настоящие ссылки, не означает, что все должен быть ссылкой. Я не понимаю, почему вы продолжаете ссылаться на настоящие ссылки.
Хорошо. Вы предлагаете мне изменить parent-items с a на div или что-то в этом роде?
да. Div или span или что-то в этом роде. Возможно, вам не понадобится родительский тег. li, являющегося родительским для нереальных ссылок, может быть достаточно. Я просто хочу убедиться, что вы понимаете, что происходит, и определить, действительно ли вам нужны эти ненастоящие теги a. Если вы этого не сделаете, этот вопрос об исправлении не нужен, :)
Хорошо, есть над чем подумать. Однако, насколько я знаю, это очень нормальная практика, чтобы сделать все элементами в li вашего a, просто для того, чтобы стилизовать их все вместе в css. Если вы добавляете span или div, вы должны стилизовать их отдельно. Меню, которые динамически создаются Wordpress, даже не имеют возможности создавать пункты меню, отличные от a. Буквально на первом сайте, который я открываю, есть элементы, не связанные с родительским меню, с a и #: canva.com/create/restaurant-menu
Это не делает это хорошей практикой. Существует множество сайтов с плохим дизайном. И в дополнение к этому, большинство веб-сайтов не принимают во внимание, как разметка на их веб-сайтах будет (не) работать с программами чтения с экрана и другими программами обеспечения доступности, на которые полагаются пользователи, у которых есть проблемы со зрением или мобильностью, чтобы иметь возможность использовать их веб-сайты. Наличие поддельных ссылок на странице, которая ничего не делает, - очень быстрый способ запутать эти программы и сделать веб-сайты менее доступными для этих пользователей.
В следующий раз, когда у меня будет возможность составить меню вручную (и мне не придется иметь дело с динамически создаваемыми меню с a href с #), я подумаю о том, что вы сказали. Кстати, a заставляет браузер менять курсор на руку. Это еще одна вещь, которую нужно имитировать с помощью css cursor:hand.
С CSS нетрудно сделать.
Хорошо, вы меня убедили. Мне действительно не нравится тот факт, что в моем меню есть a, которые на самом деле не являются ссылками, и какую функциональность я должен убить дополнительным и странным javascript, из которого я действительно не знаю, что он делает.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
выберите все якоря с href='#' с помощью селектора jQuery, затем добавьте к ним прослушиватель onclick.
var anchors = $("a[href='#']")
anchors.on("click", (ev) => {
ev.preventDefault();
console.clear()
console.info("anchor clicked");
return false
})<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "bar" >
<label id = "toggle-label" for = "toggle-1">Menu</label>
<input type = "checkbox" id = "toggle-1">
<ul class = "menu">
<li><a href = "#">Home</a></li>
<li><a href = "#">Item with sub</a>
<ul>
<li><a href = "https://google.com" target = "_blank">Sub 1.1</a></li>
<li><a href = "#">Sub 1.2</a></li>
</ul>
</li>
<li><a href = "#">Item with sub-sub</a>
<ul>
<li><a href = "#">service-1</a></li>
<li><a href = "#">Item with sub</a>
<ul>
<li><a href = "#">sub sub 1</a></li>
<li><a href = "#">sub sub 2</a></li>
<li><a href = "#">sub sub 3</a></li>
</ul>
</li>
<li><a href = "#">Electrical</a></li>
</ul>
</li>
<li><a href = "#">Pricing</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
</div>Кажется, это отлично работает. Могу я спросить, в чем разница между return false и preventDefault()?
return false предотвращает дефолт и останавливает распространение. Так что на самом деле вызов по умолчанию для предотвращения не нужен
да, это почти то же самое, используйте только один из них, я добавил оба только в качестве примеров использования.
@Taplar Является ли return false похожей на php-functions exit (); и / или die () ;? Чтобы остановить весь дальнейший код?
Нет, die влияет на работу всего скрипта. return false влияет только на событие, обрабатываемое в данный момент.
$('li a[href = "#"]').on('click', function(event){
event.preventDefault();
});
Вы можете попробовать это.
это очень просто, вы можете попробовать это
нужно не только пытаться, но и понимать, и пытаться делать иначе, чем это.
$('a[href = "#"]').click(function (event) {
return false;
});<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = "bar" >
<label id = "toggle-label" for = "toggle-1">Menu</label>
<input type = "checkbox" id = "toggle-1">
<ul class = "menu">
<li><a href = "#">Home</a></li>
<li><a href = "#" onclick = "return false;">Item with sub</a>
<ul>
<li><a href = "https://google.com" target = "_blank">Sub 1.1</a></li>
<li><a href = "#">Sub 1.2</a></li>
</ul>
</li>
<li><a href = "#" onclick = "return false;">Item with sub-sub</a>
<ul>
<li><a href = "#">service-1</a></li>
<li><a href = "#" onclick = "return false;">Item with sub</a>
<ul>
<li><a href = "#">sub sub 1</a></li>
<li><a href = "#">sub sub 2</a></li>
<li><a href = "#">sub sub 3</a></li>
</ul>
</li>
<li><a href = "#">Electrical</a></li>
</ul>
</li>
<li><a href = "#">Pricing</a></li>
<li><a href = "#">Contact Us</a></li>
</ul>
</div>тогда сделай это [href = "#"] 'его простой чувак
Какую проблему вы пытаетесь решить, возвращая false по ссылке? Я знаю, что это отменяет действие, но вы не объяснили, какая проблема позволяет ссылке проходить через причины.