Как найти ссылку на кнопку

Если коротко:

Девушка на картинке как бы спрашивает — Куда жать?

Используйте для кнопок — кнопки, а для ссылок — ссылки.

Разделитель

Это не исчерпывающее руководство по кнопкам и не пример невероятного дизайна, а лишь попытка показать, что есть разница между ссылками и кнопками.

Разделитель

Для кого эта статья?

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

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

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

Разделитель

Содержание

Разделитель

Ссылки

Разделитель

Введение

Когда наводят указатель на ссылку которая кнопка то в левом нижнем углу появляется надпись javascript:;:
javascript:;
Или адрес с решёткой:
https//site.name/page.html#

ПКМ на такой кнопке и контекстное меню любезно предложит:
Контекстное меню предлагает открыть ссылку в новой вкладке: сохранить, копировать…

ctrl + ЛКМ на такой кнопке откроют новую вкладку на которой будет ровно та страница, с которой она была открыта.

Кроме того такая ссылка с решёткой в качестве ссылки, станет :visited , если ещё не стала до этого, и приобретёт соотстветствующее стилевое оформление. Если дизайнер его конечно не зарезал, что в большинстве случаев конечно зря, о чём ниже.

Разделитель

<a href=»//link.url»>Ссылка</a>

  • Если клик приведёт к смене адреса,
  • этот адрес можно скопировать,
  • отправить по электронной почте,
  • на него можно снова зайти,
  • это не адрес самой страницы
    — это ссылка.

Разделитель

У ссылки должны быть стили для обычного, :active , :visited , :focus и :hover состояний.

Разделитель

Антипаттерн

Поздравляю! С такими стилями все ваши ссылки визуально превратятся в обычный текст. Найти их на странице станет крайне затруднительно.

Антипример с неразличимыми ссылками

Разделитель

Состояния

текст с различными состояниями ссылки

a — обычное состояние

В обычном состоянии a должна быть синей или подчёркнутой, а лучше и синей и подчёркнутой, чтобы пользователь без наведения мыши понимал, что это — ссылка. Пользователь привык к тому, что синие слова на странице это ссылки, даже если они не подчёркнуты. Если вам не нравится синий цвет для ссылок, меняйте его, но тогда ссылки подчёркивайте.

a:hover — наведение

Когда курсор находится над ссылкой, она становится :hover и в данном примере приобретает подчёркивание. Так пользователь поймёт, что это точно ссылка, на которую можно кликнуть.

a:focus — фокус клавиатуры

Когда на ссылку устанавливается указатель, перемещаемый табулятором TAB ↹
она становится :focus . В 2016 году это может показаться странным, но есть люди которые работают с сайтам посредством клавиатуры. У некоторых вовсе сломана мышь. В любом случае, занулять :focus состояние — это преступление против таких людей.

Особые спецэфекты применять не обязательно, достаточно таких как у :focus .

CSS чтобы не писать дважды:

a:active — клик

Важное состояние :active происходит когда пользователь уже кликнул на ссылку, но клавишу ещё не отпустил. Помогает пользователю понять, что его клик сработал, и ему не нужно кликать по ней несколько раз, чтобы точно перейти на нужную страницу.

a:visited — ранее посещённая страница

:visited , поможет пользователю не забыть какие странички он уже открывал и не открывать их повторно. Так вместе с :active и :hover мы чуточку разгрузим интернет от случайных загрузок, и сделаем его чуть лучше и быстре.

Разделитель

В эпоху HTML4 вместо кнопок использовались ссылки подчёрнутые пунктирной линией. Этот паттерн устарел.

Подчёркивание пунктирной линией рекомендуется для тултипов при наведении.
Например у <abbr> такое выделение поможет понять, что можно навести указатель и получить расшифровку.

Разделитель

Пример нестандартного оформления ссылок:

Пример на котором состояния ссылок оформленны нестандартно

Разделитель

Разделитель

HTML5 <button>Кнопка</button>

  • Если клик не меняет адрес страницы,
  • адрес нельзя скопировать
  • и нельзя этим адресом поделиться — это кнопка.

Разделитель

Доступность

<button /> может быть недоступен на архаичных браузерах или устройствах. У кнопок не применятся стили без специальных JavaScript скриптов.
Но вас это не должно беспокоить. На таких устройствах часто и JavaScript не работает. И быть может CSS.

Вообще если следовать идеологии что всё, что должно обрабатываться JavaScript’ом, должно добавляться JavaScript’ом, такой проблемы вовсе не возникнет.

Разделитель

Поведение внутри формы

<button> по умолчанию имеет атрибут type=submit даже если его не прописать.

Ещё этот атрибут может принимать значения reset для сброса заполнения в форме
и button чтобы исключить влияние на форму. Правила хорошего тона предполагают,
что везде нужно писать <button type=»button»>Кнопка</button> .

Но на деле можно ограничится полной записью только внутри <form></form> ,
type=submit в остальных местах ни на, что не влияет.

Это кстати отличный сбособ для стилизации кнопки отправки формы.
В отличии от <input type=»submit» value=»Кнопка» /> , в содержимое
button можно писать любой HTML код, а не только текст.
Например

Это даёт даже больше свободы в стилевом оформлении чем <input type=»image» />

Разделитель

Состояния

Похожи на состояния у ссылок за исключением того, что у кнопок нет состояния :visited , зато есть состояние :disabled .
Обычно дефолтное оформление браузера выпиливается основательно, иногда с нейтрализацией отображения состояний отличных от обычного.
Да. Этот гайд для тебя, любитель превратить веб-страницу в бумажный аналог.

Стилей для этих штучек понадобится немного больше, но всё не так страшно. Кроме того ребята из Twitter и отчасти Google уже позаботились о реализации велосипеда.
Тёплый ламповый Bootstrap «и новомодный MaterializeCSS, например.

Разделитель

Отображение

Так выглядит <button>Кнопка</button> в моём Chrome 54:
отображение состояний кнопки
На картинке button , button:hover , button:focus , button:active соответственно.

Без излишеств. Но учитывая движение Google в направлении Material Design, вполне может статься так, что в скором времени их заменят на подобные аналоги.

Как узнать ссылку кнопки на сайте

Просмотр профиля

Группа: User
Сообщений: 1
Регистрация: 21.2.2016
Поблагодарили: 0 раз
Репутация: 0

Ребят, помогите советом.

Вот страница http://hroost.com — видите, сверху есть неумело установленная менюшка с валютой — украина, россия ? и кнопка «валюта». Скажите, можно ли узнать, какая получается ссылка при нажатии на «валюта»? чтобы назначить вместо этой менюшки обычные ссылки, нажимая на которые я смогу менять валюту на сайте. Спасибо

Webmaster_hb

Просмотр профиля

/>

Группа: User
Сообщений: 7538
Регистрация: 5.3.2007
Поблагодарили: 0 раз
Репутация: 0

тут просто кнопку нельзя заменить ссылкой
т.к. это форма с данными которые отправляются на сервер при нажатии на кнопку

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

Как узнать ссылку кнопки на сайте

Авторизуясь в LiveJournal с помощью стороннего сервиса вы принимаете условия Пользовательского соглашения LiveJournal

  • July 2018
    1 2 3 4 5 6 7
    8 9 10 11 12 13 14
    15 16 17 18 19 20 21
    22 23 24 25 26 27 28
    29 30 31

Так ведь кнопка — это ж просто картинка со ссылкой. Если у вас есть картинка и вы знаете адрес сайта, пишете такой примерно код:

(Все квадратные скобки заменить на угловые)
Это кнопка сайта Шендеровича. В первой строке — адрес сайта, во второй строке — адрес картинки-кнопки и ее длина-ширина-рамочка (эти параметры можно опустить)

Ага! Ну тут вообще все просто, главное эту кнопку найти. )

Находите понравившуюся кнопку, на ней кликаете правой кнопкой мышки и выбираете пункт «Свойства»

Из открывшегося окна копируете адрес. Как правило он оканчивается на что-то типа «имя файла».jpg или «имя файла».gif — файлы-картинки.

Источник

0 / 0 / 0

Регистрация: 26.05.2009

Сообщений: 6

1

26.05.2009, 14:31. Показов 6959. Ответов 5

Студворк — интернет-сервис помощи студентам

Может кто подскажет как определить URL кнопки на странице. В строке адреса не прописывается. пишеет внизу но очень быстро .
Очень надо.

Заранее благодарен.



0

51 / 17 / 6

Регистрация: 18.05.2007

Сообщений: 1,322

26.05.2009, 15:01

2

Смотришь исходник страницы с кнопкой и ищешь куда по клику эта кнопка перенаправляет.



0

0 / 0 / 0

Регистрация: 26.05.2009

Сообщений: 6

26.05.2009, 15:47

 [ТС]

3

Это правильно.
Но что если используется метод post?
получается в коде :
<form action=’billboard.ws’ method=’post’>



0

51 / 17 / 6

Регистрация: 18.05.2007

Сообщений: 1,322

27.05.2009, 08:13

4

Значение атрибута action (вместе с доменным именем текущей страницы) и есть искомый URL.



0

0 / 0 / 0

Регистрация: 26.05.2009

Сообщений: 6

27.05.2009, 14:31

 [ТС]

5

не подходит
но все равно спасибо — pl



0

0 / 0 / 0

Регистрация: 29.05.2007

Сообщений: 354

27.05.2009, 16:36

6

как это не подходит?



0
Источник
$(document).on('click', '.add-to-card-one', function() {
    let href = $(this).prev('a.add_to_cart_button').attr('href');    
    if (href !== undefined) {
        console.log(href);
        //location.href = href;  // <--- надо раскоментировать
    }    
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<a href="https://example.com/" data-quantity="1" class="add_to_cart_button" data-product_id="1111" data-product_sku="222" aria-label="Выберите опции" rel="nofollow">Выберите параметры</a>
<!-- plugin version: 2.4.3; mode: show_add_to_card -->


<button type="button" data-value-product-id="225011" class="add-to-card-one" id="custom-order-button-225011">Купить в один клик</button>
Источник

Сделал такой код на jquery но как его перевести в чистый js ?
Как получить значение href при клике на класс menu-item-text

$('.menu-item-text').click(function(){

	let b = $(this).attr('href').replace('#', '');
	$('[name="'+b+'"]').scrollIntoView({block: "center", behavior: "smooth"})
	})


  • Вопрос задан

    более двух лет назад

  • 506 просмотров 

document.querySelector('.menu-item-text').addEventListener("click", (e) => {
  const elem = e.target.getAttribute('href').replace('#', '');
  document.querySelector(`[name="${elem}"]`).scrollIntoView({block: "center", behavior: "smooth"});
});

const handleClick(el) {
  const href = el.target.getAttribute('href').replace('#', '');
  document.querySelector(`[name="${href}"]`).scrollIntoView({block: "center", behavior: "smooth"});
};
document.querySelectorAll('.menu-item-text').forEach(el => el.addEventListener('click', handleClick));

document.addEventListener('click', function myClickHandler(evt) {
  const menuItem = evt.target.closest('.menu-item-text');
  if (menuItem) {
    const b = menuItem.href.hash.replace('#', '');
    console.log(b);
  }
});

Пригласить эксперта


  • Показать ещё
    Загружается…

27 мая 2023, в 23:03

10000 руб./за проект

27 мая 2023, в 22:55

1000 руб./за проект

27 мая 2023, в 22:42

500000 руб./за проект

Минуточку внимания

Источник

Последнее время я работаю только с бекендом разнообразных проектов и к фронту и тому что там происходит обращаюсь все реже и реже. А происходит там довольно много интересного, фронтенд обвешивается разного рода фреймворками по типу vue.js, лоадерами по типу requirejs и библиотеками, все это минимизируют в пару файлов и когда возникает необходимость быстро разобраться где нужный участок кода становится очень сложно, особенно когда ты только начинаешь работать с новым проектом и еще не знаком с его структурой. Очень помогает справиться с этой проблемой отладчики встроенные в браузере. Сегодня, я решил сделать для себя заметку о том, как найти код навешенный на кнопку или ссылку, и начать его дебажить..

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

Для начала создадим в jsfiddle кнопку и с помощью jquery навесим на нее несколько событий.

Код на JSFiddle: https://jsfiddle.net/orlov0562/k0szx2tf/

html код

<span id=«price»>100$</span>

<button id=«test»>Test</button>

js

let someMethod=()=>{for(let i=0;i<10;i++){console.log(‘i: ‘+(i+1));$(‘#price’).html((Number.parseInt($(‘#price’).html())+i)+‘$’)}};$(‘#test’).click(e=>console.log(‘Hello world 1’));$(‘#test’).click(someMethod);$(‘#test’).click(e=>console.log(‘Hello world 2’));

тот же код но не минифицрованный

let someMethod = () => {

    for (let i=0; i<10; i++){

    console.log(‘i: ‘+(i+1));

    $(‘#price’).html((Number.parseInt($(‘#price’).html())+i)+‘$’);

  }

};

$(‘#test’).click(e=>console.log(‘Hello world 1’));

$(‘#test’).click(someMethod);

$(‘#test’).click(e=>console.log(‘Hello world 2’));

код для тех, кто не хочет использовать jsfiddle

<html>

<body>

<span id=«price»>100$</span>

<button id=«test»>Test</button>

<script src=«https://code.jquery.com/jquery-3.4.1.min.js»></script>

<script>

let someMethod=()=>{for(let i=0;i<10;i++){console.log(‘i: ‘+(i+1));$(‘#price’).html((Number.parseInt($(‘#price’).html())+i)+‘$’)}};$(‘#test’).click(e=>console.log(‘Hello world 1’));$(‘#test’).click(someMethod);$(‘#test’).click(e=>console.log(‘Hello world 2’));

</script>

</body>

</html>

Пример на первый взгляд простой, но на то он и пример.

При запуске этого примера мы увидим кнопку и цену 100$, при нажатии на кнопку цена становится 145$. Ваша задача найти js код который отвечает за изменение цены и посмотреть как это происходит в дебагере. Думаю, что это похоже на то, когда вы в интернет магазине нажмете кнопку «Добавить скидочный купон» и цены пересчитываются, и допустим в пересчетах есть ошибка и вам надо найти кусок js кода где это происходит.

Для этого в Google Chrome (скриншоты будут из него, в Firefox будет +/- аналогично) на нужной кнопке нажимаем правой кнопкой мыши и выбираем «Inspect».

Chrome. Пунгк меню Inspect

Chrome. Пунгк меню Inspect

В открывшейся консоли разработчика мы увидим наш элемент, если это не так, то просто найдите его в DOM дереве и нажмите на него для выделения. Следующим шагом переходим на вкладку «Event Listeners». На этой вкладке будет древовидный список всех событий связанных с выбранным элементом (в нашем случае кнопкой),  жмем там на элемент «click» и раскрываем его

Chrome. Консоль разработчика. Event Listeners

Chrome. Консоль разработчика. Event Listeners

Т.к. наш пример сделан внутри JsFiddle то мы видим несколько событий связанных с нашей кнопкой. Нам нужно найти нужное нам событие, чтобы начать там отладку. Для этого можно раскрыть нужное событие и посмотреть на вложенный элемент «handler»

Chrome. Консоль разработчика. Event listenr handler

Chrome. Консоль разработчика. Event listener handler

Таким образом можно, сразу пропустить не интересующие нас обработчики. Далее, если не понятно нужный это обработчик или нет, или в случае если это нужный, то нажимаем на ссылку, указывающие на файл в котором описан данный обработчик.

Chrome. Консоль разработчика. Найти место объявления обработчика

Chrome. Консоль разработчика. Найти место объявления обработчика

После нажатия, наc перекинет на вкладку Source в место объявления обработчика

Консоль разработчика Chrome. Место объявления обработчика.

Консоль разработчика Chrome. Место объявления обработчика.

Тут мы можем посмотреть то место где объявлен обработчик, его код, а так же можем начать отладку. Если же мы сразу видим, что это не то, что нужно мы можем вернуться на предыдущий шаг перейдя на вкладку «Elements».

Т.к. код минифицирован, а зачастую именно так и будет, то не совсем понятно он это или не он. Неплохо было бы его отформатировать, чтобы было удобнее читать. К счастью, сделать это можно в этом же окне, нажимаем кнопку с фигурными скобками в футере окна

Chrome. Консоль разработчика. Форматирование кода в дебаггере.

Chrome. Консоль разработчика. Форматирование кода в дебаггере.

Откроется новая вкладка «formatted», где js код будет отформатирован

Консоль разработчика, отформатированный код в отладчике JS

Консоль разработчика, отформатированный код в отладчике JS

Теперь, устанавливаем точку останова, нажав на нужную строку. Нажимаем нашу кнопку и видим, что отладчик остановился на нужной строке.

Консоль разработчика, точка останова в отладчике

Консоль разработчика, точка останова в отладчике

На этой картинке

  • 1 — нажимаем на строку, для того, чтобы установить, убрать точку останова
  • 2 — нажимаем на нашу кнопку, чтобы сгенерировать событие
  • 3 — строка где остановится отладчик
  • 4 — кнопки управления отладчиком
  • 5 — Область переменных и их значения на текущем шаге

Далее, с помощью кнопок отладчика исследуете код и нужные переменные. В нашем случае, можете понажимать на кнопку «Step over next function call» или F10 на клавиатуре и увидите пошагово как меняется значение рядом с кнопкой в отладчике.

Chrome отладчик в консоле разработчика

Chrome отладчик в консоле разработчика

Заключение

Как видите, зная куда нажимать можно очень быстро найти нужный кусок JS кода, а так же провести его отладку. Что касается самого отладчика, советую уделить ему пару часов и разобраться, что и как работает — это сэкономит много времени в будущем. А у меня на сегодня все 🙂

Источник

Понравилась статья? Поделить с друзьями:

Не пропустите также:

  • Как найти название текста по картинке
  • Как найти точку возврата
  • Как исправить пересушенное мясо на сковороде
  • Как найти список групп в контакте
  • Как составить налоговую декларацию своими руками

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии