[X] Помощник

[ShowPrint Topic Starter]

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

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

Все вроде работает хорошо и правильно, но "ломает" обязательное наличие атрибута href:
- если указывать пустой якорь (#), то страница скролится на самый верх и ее потом опять надо прокручивать в нужное место;
- если создать якорь в непосредственной близости к ссылкам и указывать его, все равно контент сдергивается распологая строку с якорем в верхней строчке браузера, что тоже не айс...

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

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

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

Спа!

[ixman]

Ну я в 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 - 2.7.2015, 22:11

[ShowPrint Topic Starter]

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

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

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

[ixman]

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

[ShowPrint Topic Starter]

Ixman, по ссылке запускается js-функция, которая грубо:
а) производит замену картинки на странице;
б) производит арифметические действия и меняет в тексте одну цифру на другую.

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

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

Вопрос либо как правильно прописать якорь, либо на что поменять гиперссылку как класс для получения необходимого действия.
Напрашивается реализация посредством <button>, но я не полностью уверен, что это будет правильным подходом и пытаюсь спросить совета...
/* видимо пытаюсь криво, бывает =) */


Сообщение отредактировал ShowPrint - 3.7.2015, 0:33

[ixman]

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

 

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

[ShowPrint Topic Starter]

пробуй вот так

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

[TimurR]

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

[ShowPrint Topic Starter]

TimurR, причин несколько, в порядке важности:
а) я не профессионал, скорее ламмер;  :wacko:
б) написал в топике: 

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

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

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


Сообщение отредактировал ShowPrint - 3.7.2015, 1:16

[TimurR]

Понятно :)