Создание списка тегов привязки - PullRequest
Новая
       7

Создание списка тегов привязки

6 голосов
/ 27 июня 2011

Я создаю список тегов привязки из запроса MySQL / PHP;теги привязки вызывают функцию JavaScript.

У меня есть «catch 22»:

  • href = "#" заставляет страницу переходить наверх при каждом нажатии на один из тегов привязки (очень раздражает)
  • remove href = "#" означает, что курсор не изменяется, так как тег привязки наведен, и этот тег привязки не имеет внешнего вида тега привязки.

Я знаюЕсть способ справиться с этим с помощью JavaScript (возможно, jQuery), но я не помню, как в данный момент.Тем не менее, я действительно предпочитаю более простое исправление HTML (если оно существует), которое не требует от меня входа в JavaScript.

Edit: "не требует от меня входа в JavaScript "==" не требует подробных изменений в JavaScript. "

Ответы [ 5 ]

4 голосов
/ 27 июня 2011

В вашей функции JavaScript вы должны return false, или с JQuery вы можете использовать preventDefault()

Пример: 

$('a').click(function(event) {
    event.preventDefault();
    // do something
});

Или в вашем случае:

<a href=“#” onclick="foo();return false;">

Или измените href на javascript:void(0): 

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

В идеале ваша ссылка ухудшается без JavaScript, поэтому обычно избегают третьего варианта.

2 голосов
/ 27 июня 2011

Более простое исправление HTML для вас: лично для простых тестовых ссылок я просто использую href=""

Для ссылок, которые указывают на функцию JavaScript, я обычно использую href="javascript:;". В любом случае вы перестанете прыгать.

1 голос
/ 27 июня 2011

Вам нужно вызвать event.preventDefault(); где-нибудь в вашем обработчике событий клика. В ванильном javascript это можно сделать так: 

<script type="text/javascript">
  function foo(e) {
    e.preventDefault();
    // other code
  }
</script>
<a href="#" onclick="foo(e);"></a>

Кроме того, вы также можете вернуть false: 

<a href="#" onclick="foo();return false;/>

Это также можно сделать в jQuery довольно просто: 

$('.mylink').click(function(e) {
  e.preventDefault();
  // other code
});

Недостатком использования return false; является то, что это также предотвращает всплывание события в DOM. Если вас не волнует всплывающее сообщение о событии, можно использовать false, но лично я считаю, что лучше использовать event.preventDefault();, если только вы специально не хотите остановить также всплывающее событие.

1 голос
/ 27 июня 2011

возвращать false после onclick или из функции foo ().

0 голосов
/ 27 июня 2011 
<html>
    <head>

    </head>
    <body>
    <style>
    a {
        text-decoration: underline;
    }
    a:hover {
        text-decoration: underline;
    }
    </style>
    <script type="text/javascript">
      function foo() {
        alert('Hello World');
      }
    </script>
    <a onclick="foo();">Click Here</a>
    </body>
    </html>

Просто добавив CSS и удалив href, все в порядке.

...