e.preventDefault () для предотвращения перехода якоря к идентификатору, не работающему в анонимной функции - PullRequest
Новая
       5

e.preventDefault () для предотвращения перехода якоря к идентификатору, не работающему в анонимной функции

0 голосов
/ 08 февраля 2019

У меня есть следующий jQuery / JS, который запускает некоторые элементы при нажатии на элемент: 

$(tabs).click(function(e) {
    tabs.removeClass('active');
    $(this).addClass('active');

    $(tabIDs).removeClass('js_tab_area_show');
    $($(this).attr('href')).addClass('js_tab_area_show');

    e.preventDefault();
    alert('worked');
});

tabs здесь было инициализировано перед функцией и выбрало элементы, на которые я хочу нацелиться.Все вышеперечисленное уже работает.Однако теперь я хочу отключить элемент привязки (т. Е. tabs в этом случае) от прокрутки до элемента с идентификатором, который содержится в свойствах href моих привязок.Я попытался осмотреться, и многие предложили preventDefault(), чтобы предотвратить прокрутку.Тем не менее, это не сработало для меня.Единственное отличие, которое я чаще всего вижу, состоит в том, что у них есть именованная функция, предназначенная для обработки событий щелчка, которая вызывается из функции щелчка.Мой с другой стороны сделал выше.alert('worked') выстрелил, показывая код, выполненный до конца.Что я тут не так сделал?

1 Ответ

0 голосов
/ 08 февраля 2019

href Модификация

Вместо того, чтобы усложнять ваш JavaScript / jQuery или CSS, сделайте следующее. 

<a href="#/">I DON't JUMP</a>

☝ Просто добавьте косую черту: /

Если у вас есть тонна ссылок и нет доступных утилит на стороне сервера, см. Демонстрация 2 .Он имеет простой сборщик ссылок JavaScript.

Демо 1 

h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

a {
  display: inline-block;
  height: 30px;
  font-size: 24px;
  width: 40%;
  margin: 400px 0;
}

a:first-of-type {
  color: red;
  text-align: right;
}

a:last-of-type {
  color: blue;
  text-align: left;
}
<main>
  <h1>Scroll Down</h1>
  <h2>⇩</h2>
  <a href="#">Click me.<br>I JUMP.</a>
  <a href="#/">Click me.<br>I DO NOT JUMP.</a>
</main>

Демо 2 

Array.from(document.querySelectorAll('a')).forEach(lnx => {
  if (lnx.getAttribute('href') === '#') lnx.setAttribute('href', "#/");
});
h1,
h2 {
  text-align: center
}

h2 {
  font-size: 64px
}

main {
  margin: 400px auto;
}

a:nth-of-type(odd) {
  background: #000;
  color: #fff;
}

a:nth-of-type(even) {
  color: #000;
}
<h1>Scroll Down</h1>
<h2>⇩</h2>
<main>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
  <a href='#'>WE DON'T JUMP</a>
</main>
...