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


× Быстрый вопрос
Пользователь месяца
dos1k dos1k 1-й за Май
Очков активности: 1 194 28 тем, 115 сообщений, 4 балла репутации
Сайт: dos1k.ru
ТОП самых активных за этот месяц
  • Фотография Olya23
    #1

    Olya23
    Очков активности: 696 3 темы, 107 сообщений, 4 балла репутации

  • Фотография Rodiola
    #2

    Rodiola (rukodelkovo.ru)
    Очков активности: 414 0 тем, 69 сообщений, 4 балла репутации

  • Фотография maxnik
    #3

    maxnik (konovalovpavel.ru)
    Очков активности: 85.5 0 тем, 19 сообщений, 3 балла репутации

  • Фотография agrx
    #4

    agrx (key-assort.ru)
    Очков активности: 54 0 тем, 18 сообщений, 2 балла репутации

  • Фотография fedornabilkin
    #5

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 42 0 тем, 14 сообщений, 2 балла репутации

  • Фотография BLIK
    #6

    BLIK
    Очков активности: 40.5 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #7

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография re-search
    #8

    re-search
    Очков активности: 36 5 тем, 9 сообщений, 1 балл репутации

  • Фотография Ixman
    #9

    Ixman (o5cat.ru)
    Очков активности: 24 0 тем, 8 сообщений, 2 балла репутации

  • Фотография Artos
    #10

    Artos
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 24.05.2019
  • Яндекс выдача: 17.06.2019
Топ 5 участников по репутации


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

#1 ShowPrint

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

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

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

 

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

 

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

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

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

 

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

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

 

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

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

 

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

 

Спа!


 

 

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


#2 Ixman

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

Отправлено 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
  • 3 318 сообщений
  • Репутация: 933

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

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

 

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

 

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


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


#4 Ixman

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

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

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


  • 0


#5 ShowPrint

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

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

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

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

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

 

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

 

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

 

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

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

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


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

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


#6 Ixman

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

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

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

 

5XIriiZK.png 

 

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

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


  • 2


#7 ShowPrint

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

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

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

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


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


#8 TimurR

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

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

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


  • 0

#9 ShowPrint

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

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

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

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

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

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

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

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

 

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


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

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


#10 TimurR

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

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

Понятно :)


  • 0

#11 Ixman

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

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

@ShowPrint, всегда рад помочь )


  • 0


#12 ShowPrint

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

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

всегда рад помочь
@Ixman, не сомневаюсь, но есть подозрение что у меня будет возможность "проверить"  B)

У меня загрузка вроде рассасывается на работе и надеюсь на след.неделе получится задать накопившиеся вопросы - а их у меня "было"...  :rolleyes:


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


#13 Ixman

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

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

@ShowPrint, ждёмс  :)


  • 0


#14 ShowPrint

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

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

@Ixman, первую темку уже пишу, to be soon, но в ней больше наблюдения и "размышлизмы" и мало вопросов, поэтому решился сегодня написать, несмотря на то, что в ночь катить в деревню и на выходных без доступа к форуму...


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


robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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