Как сделать так, чтобы тег привязки ссылался ни на что?

Я использую jQuery, мне нужно, чтобы некоторые теги привязки не выполняли никаких действий.

Я обычно пишу это так:

<a href="#">link</a>

Однако это относится к верхней части страницы!

Если вы не хотите, чтобы это указывало на что-либо, вам, вероятно, не следует использовать <a>тег (anchor).

Если вы хотите, чтобы что-то было похоже на ссылку, но не действовало как ссылка, лучше использовать соответствующий элемент (например, <span>), а затем стилизовать его с помощью CSS:

<span class="fake-link" id="fake-link-1">Am I a link?</span>

.fake-link {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

Кроме того, учитывая, что вы пометили этот вопрос "jQuery", я предполагаю, что вы хотите прикрепить обработчик событий щелчка. Если это так, просто сделайте то же самое, что и выше, а затем используйте что-то вроде следующего JavaScript:

$('#fake-link-1').click(function() {
    /* put your code here */
});

Есть несколько менее совершенных решений:

1. Ссылка на фальшивый якорь

<a href="#">

Проблема: при нажатии на ссылку происходит возврат к началу страницы

2. Использование тега, отличного от «а»

Используйте тег span и используйте jquery для обработки клика

Проблема: ломает навигацию клавиатуры, приходится вручную менять курсор при наведении

3. Ссылка на пустую функцию JavaScript

<a href="javascript:void(0);">
<a href="javascript:;">

Проблема: ломается при связывании изображений в IE

Решение

Поскольку у них у всех есть свои проблемы, решение, на котором я остановился, состоит в том, чтобы связать с фальшивым якорем, а затем вернуть false из метода onClick:

<a href="#" onClick="return false;">

Не самое лаконичное решение, но оно решает все проблемы с помощью вышеуказанных методов.

Чтобы заставить его вообще ничего не делать, используйте это:

<a href="javascript:void(0)"> ... </a>

Правильный способ справиться с этим - «разорвать» ссылку с помощью jQuery при обработке ссылки.

HTML

<a href="#" id="theLink">My Link</a>

JS

$('#theLink').click(function(ev){
    // do whatever you want here

    ev.preventDefault();
    ev.stopPropagation();
});

Эти последние два вызова не позволяют браузеру интерпретировать щелчок.

Есть так много способов сделать это как

Не добавлять и hrefатрибут

<a name="here"> Test <a>

Вы можете добавить событие onclick вместо href как

<a name="here" onclick="YourFunction()"> Test <a>

Или вы можете добавить функцию void, как это было бы лучшим способом

<a href="javascript:void(0);"> 
<a href="javascript:;">

Что вы подразумеваете под ничем?

<a href='about:blank'>blank page</a>

или

<a href='whatever' onclick='return false;'>won't navigate</a>

Я думаю, что вы можете попробовать

<a href="JavaScript:void(0)">link</a>

Единственный улов, который я вижу здесь, это высокий уровень безопасности браузера, который может вызвать выполнение javascript.

Хотя это один из более простых способов, чем

<a href="#" onclick="return false;">Link</a>

это следует использовать экономно

Прочитайте эту статью для некоторых указателей https://web.archive.org/web/20090301044015/http://blog.reindel.com/2006/08/11/a-hrefjavascriptvoid0-avoid-the-void

Этот ответ должен быть обновлен с учетом новых веб-стандартов (HTML5).

Это:

<a tabindex="0">This represents a placeholder hyperlink</a>

... действителен HTML5. Атрибут tabindex делает клавиатуру фокусируемой, как обычные гиперссылки. Вы могли бы также использовать spanэлемент для этого, как упомянуто ранее, но я считаю, что использование aэлемента более элегантно.

См .: https://w3c.github.io/html-reference/a.html
и: https://html.spec.whatwg.org/multipage/links.html#attr-hyperlink-href.

Вот три способа, которыми свойство <a>tag hrefтега ни на что не ссылается:

<a href="JavaScript:void(0)"> link </a>

<a href="javascript:;">link</a >

<a href="#" onclick="return false;"> Link </a>

Я знаю, что это старый вопрос, но я все равно решил добавить свои два цента:

Это зависит от того, что будет делать ссылка, но обычно я указываю ссылку на URL, который, возможно, отображает / делает то же самое, например, если вы делаете немного о всплывающем окне:

<a id="about" href="/about">About</a>

Потом с помощью jQuery

$('#about').click(function(e) {
    $('#aboutbox').show();
    e.preventDefault();
});

Таким образом, очень старые браузеры (или браузеры с отключенным JavaScript) могут по-прежнему переходить на отдельную страницу about, но, что более важно, Google также подберет это и просканирует содержимое страницы about.

Убедитесь, что все ваши ссылки, которые вы хотите прекратить иметь href="#!"(или все, что вы хотите, действительно), а затем используйте это:

jq('body').on('click.stop_link', 'a[href="#!"]',
function(event) {
     event.preventDefault();
});

Вы можете иметь HTML-привязку ( aтег) без hrefатрибута. Оставьте hrefатрибут, и он не будет ссылаться ни на что:

<a>link</a>

Единственное, что сработало для меня, это сочетание вышеперечисленного:

Первый ли в уль

<li><a onclick="LoadTab2_1()" href="JavaScript:void(0)">All Assigned</a></li>

Затем в LoadTab2_1 я вручную переключил вкладку div

$("#tabs-2-1").hide();
    $("#tabs-2-2").show();

Это потому, что отключение также отключает действие на вкладках

Вам также нужно вручную оформить вкладку, когда основная вкладка меняет положение вещей.

$("#secTab1").addClass("ui-tabs-active").addClass("ui-state-active").addClass("ui-state-hover").addClass("ui-state-focus");
    $("#secTab1 a").css("color", "#ffffff");

Вы можете сделать это,

<a style='cursor:pointer' >Link</a>

<a href="#" onclick="SomeFunction()"  class="SomeClass">sth.</a>

это был мой якорный тег. так что возвращать false on onClick = "" событие здесь бесполезно. Я только что удалил свойство href = "#", и оно работало для меня, как показано ниже

<a onclick="SomeFunction()"  class="SomeClass">sth.</a>

и мне нужно было добавить этот CSS.

.SomeClass
{
    cursor: pointer;
}

Я столкнулся с этой проблемой на сайте WordPress. Заголовки в выпадающих меню всегда имели атрибут, href=""а используемый плагин заголовка допускал только стандартные URL-адреса. Самым простым решением было просто запустить этот код в нижнем колонтитуле:

jQuery('[href=""]').click(function(e){
    e.preventDefault();
});

Это не позволит пустым якорям делать что-либо.

React больше не поддерживает использование такой функции href="javascript:void(0)"в вашем теге привязки, но здесь есть кое-что, что работает довольно хорошо.

<a href="#" onClick={() => null} >link</a>

Я знаю, что это помечено как вопрос jQuery, но вы также можете ответить на него с помощью AngularJS.

в вашем элементе добавьте директиву ng-click и используйте переменную $ event, которая является событием click ... предотвратите его поведение по умолчанию:

<a href="#" ng-click="$event.preventDefault()">

Вы даже можете передать переменную $ event в функцию:

<a href="#" ng-click="doSomething($event)">

в этой функции вы делаете все, что хотите с событием click.