Перейти к содержимому



Как ПРАВИЛЬНО сделать якорь ссылки?

#1 ShowPrint

ShowPrint
  • Пользователь PRO
  • 1 718 сообщений
  • Репутация: 408
0

Отправлено 02 Июль 2015 - 19:26

Подскажите, плз, есть ли способ правильно (и желательно валидно) разрулить следующую ситуацию:

 

На странице есть две ссылки, при нажатии на которые нет никаких переходов (ни внешних, ни внутренних), а просто производится запуск js-функции (по событию onClick) которая условно меняет часть содержимого этой же страницы. Ссылки посредством css приведены к виду кнопок...

 

Все вроде работает хорошо и правильно, но "ломает" обязательное наличие атрибута href:

- если указывать пустой якорь (#), то страница скролится на самый верх и ее потом опять надо прокручивать в нужное место;

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

 

В идеале хочется чтоб по клику на ссылку не происходило никаких перемещений содержимого страницы, просто производился запуск js-функции

Кто-нибудь сталкивался с решением подобной задачи? Нагуглил вот такое решение: <a href="javascript:void(0)"> но не уверен что он правильное...

 

Или в подобных случаях правильнее использовать <button> и запускать сценарий по нажатию на кнопушку?

(Но вроде как <button> предназначен для использования внутри тега <form>, а данные никуда мне отправлять не надо, да и будет ли это валидно...)

 

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

 

Спа!


 

 

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как правильно покупать ссылки для своего сайта в GoGetLinks (ВИДЕО + АУДИО)
  2. Как правильно оставлять ссылки на сайтах?
  3. Как правильно продвигать сайт с помощью ссылок?
  4. Как правильно избавиться от несуществующих ссылок?
  5. Как правильно разместить ссылки на сайт для поднятия тиц?

#2 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 02 Июль 2015 - 19:49

Ну я в JS не силён, хотя принцип должен быть тот же, что и при использовании jquery, ведь это библиотека js. В общем там в функции примерно так делается

$(document).ready(function() {
    $("body").on('click', '.ajax', function () {
        бла бла бла
        ...
        return false;
    });

Вот это return false; предотвращает последствия клика по ссылке или кнопке. Но есть ещё один вариант, о котором я знаю. Выглядит так

$(document).ready(function(){
    $("#click").click(function(e){
        e.preventDefault();
        бла бла бла...
    });
});

Тут уже сбрасывает действие эта e.preventDefault(); комбинация.

 

Не знаю поможет ли, но чем чёрт не шутит  :)


Сообщение отредактировал Ixman: 02 Июль 2015 - 21:11

  • 0

#3 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 718 сообщений
  • Репутация: 408

Отправлено 02 Июль 2015 - 19:59

@Ixman, спасибо за постоянную готовность прийти на помощь!

 

Вопрос на самом деле не из разряда js, а больше по html - сам js работает как надо... (пока, по крайней мере  :unsure: )

 

Суть вопроса состоит в том, как правильно сделать якорь у гиперссылки, чтоб на нажатию на ссылку не производилось скролинга содержимого страницы. Или вообще оформить этот кусок кода с помощью какого-нибудь другого тега, например button...  :wacko:


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#4 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 02 Июль 2015 - 20:06

@ShowPrint, не могу понять, а что должно происходить по нажатию на ссылку?


  • 0

#5 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 718 сообщений
  • Репутация: 408

Отправлено 02 Июль 2015 - 20:24

@Ixman, по ссылке запускается js-функция, которая грубо:

а) производит замену картинки на странице;

б) производит арифметические действия и меняет в тексте одну цифру на другую.

 

а) и б) - реализованы и работают как надо, но при нажатии на ссылку из-за href='#якорь' происходит скроллинг страницы, который в данном случае не нужен...

 

(здесь была ссылка на страницу) - речь идет об опции выбора цвета футболок: не нравится что в зависимости от размещения содержимого окна при нажатии на кнопку-ссылку страница скроллится по якорю...

 

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

Напрашивается реализация посредством <button>, но я не полностью уверен, что это будет правильным подходом и пытаюсь спросить совета...

/* видимо пытаюсь криво, бывает =) */


Сообщение отредактировал ShowPrint: 02 Июль 2015 - 23:33

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#6 Ixman

Ixman
  • Пользователь PRO
  • 2 159 сообщений
  • Репутация: 432

Отправлено 02 Июль 2015 - 21:09

@ShowPrint, пробуй вот так

 

5XIriiZK.png 

 

По крайней мере внедряя код в браузере в html код страницы скроллинга не происходит

Ну по аналогии и для другой ссылки


  • 2

#7 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 718 сообщений
  • Репутация: 408

Отправлено 02 Июль 2015 - 23:38

пробуй вот так
@Ixman, всего-то исправлений...  :huh:

Супер!!! В локалке тоже все работает, ща закачаю на сайт... СПАСИБО!


  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#8 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 02 Июль 2015 - 23:54

Можно поинтересоваться, почему изначально не был выбран вариант с реализацией через бутон? 


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



#9 ShowPrint

ShowPrint
    Topic Starter
  • Пользователь PRO
  • 1 718 сообщений
  • Репутация: 408

Отправлено 03 Июль 2015 - 00:16

@TimurR, причин несколько, в порядке важности:

а) я не профессионал, скорее ламмер;  :wacko:

б) написал в топике: 

вроде как <button> предназначен для использования внутри тега <form>

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

г) исторически сложилось...

 

Пункты б), в) и г) являются следствием п. а)  B) 


Сообщение отредактировал ShowPrint: 03 Июль 2015 - 00:16

  • 0
MasterWEBS: третий дом - моё хобби и увлечение... Второй дом: работа - не меньше 12 часов в день...
Первый дом - под охраной: "Осторожно - злая жена!" (дрессировалась долго и надёжно) /*ссылку не просите - не дам!*/


#10 TimurR

TimurR
  • Пользователь PRO
  • 831 сообщений
  • Репутация: 180

Отправлено 03 Июль 2015 - 00:18

Понятно :)


  • 0

Рекомендую хостинг: www.ihc.ru

Разработка сайтов / Дизайн / Верстка - писать в л.с.



robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru