Как сделать якорный тэг ни к чему?

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

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

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

Однако это относится к началу страницы!

Ответ 1

Если вы не хотите, чтобы он указывал на что-либо, вы, вероятно, не должны использовать тег <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 */
});

Ответ 2

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

1. Ссылка на поддельный якорь

<a href="#">

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

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

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

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

3. Ссылка на функцию javascript void

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

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

Решение

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

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

Не самые сжатые решения, но он решает все проблемы с указанными выше методами.

Ответ 3

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

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

Ответ 4

Правильный способ справиться с этим - "разбить" связь с jQuery, когда вы обрабатываете ссылку

HTML

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

JS

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

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

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

Ответ 5

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

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

или

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

Ответ 6

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

<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

Ответ 7

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

Это:

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

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

Смотрите: http://dev.w3.org/html5/markup/a.html
и: http://www.w3.org/html/wg/drafts/html/master/links.html#attr-hyperlink-href

Ответ 8

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

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

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

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

Ответ 9

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

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

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

Вы можете добавить событие onclick вместо href, например

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

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

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

Ответ 10

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

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

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

Затем с помощью jQuery

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

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

Ответ 11

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

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

Ответ 12

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

Сначала li в ul

<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");

Ответ 13

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

<a>link</a>

Ответ 14

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

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

Это предотвратит выполнение пустых якорей.

Ответ 15

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

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

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

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

.SomeClass
{
    cursor: pointer;
}

Ответ 16

Вы можете сделать это с помощью

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

Ответ 17

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

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

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

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

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

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