Почему не работают мои href-ссылки?
Я немного новичок в веб-программировании и искал повсюду, пытаясь решить эту проблему самостоятельно, но, хоть убей, я не могу в этом разобраться, я очень ценю любую помощь.
Я в основном делаю панель навигации и пытаюсь связать ее с другими моими html-страницами, но она не работает. Я использую следующий код.
Ссылка в логотипе работает нормально. Ссылка в контакте также работает нормально, нет проблем, когда я ссылаюсь на элемент на странице. Остальные четыре ссылки не работают. Я также пробовал установить href на адрес «http», но это тоже не сработало. Я провел все эти тесты в функции предварительного просмотра браузера DreamWeaver (IE и Chrome), а также на удаленном сервере без разницы в результатах.
Я также заметил, что z-index в заголовке установлен на 200 (это пример кода, с которым я работаю), который, как я понимаю, играет роль в том, как элементы располагаются по слоям. Я безуспешно пытался с этим повозиться. Что вы ребята думаете?
Edit1: вот как выглядит моя файловая структура
Также вот шаблон, который я использовал
Edit2: Хорошо, ребята, я обнаружил, что проблема была в файле JS с именем jquery.singlePageNav.min.js
К сожалению, когда я отключаю этот файл, я теряю красивый слайдер изображений, который был на моей веб-странице, но ссылки снова работают, поэтому теперь мне нужно это исправить: p
Почему тег «a href» при клике на него не работает?
Сразу замечу что баг смог воспроизвести только на webkit-браузерах, и это были opera, chrome и яндекс-браузер. В ie11, firefox этого бага нет.
Допустим есть некий тег a, у него есть некий атрибут href, содержащий соотвественно некий url.
И если стилизовать этот тег как display: inline-block или просто block, проставить какие-нибудь паддинги, то у него внутри появляется небольшая область, нажатие на которую не приводит ни к переходу по ссылке указанной в href, ни даже к появлению события click.
Говоря что не появляется событие click я имею в виду что не срабатывает вот такое простейшее событие:
Если кликать не в проблемную область, то событие ожидаемо срабатывает.
Здесь полный пример: codepen.io/anon/pen/rvGgy
Конкретно в данном примере нерабочая область имеет высоту в 2 пикселя и находится точно под текстом. На том же уровне, но уже не под текстом ссылка работает.
Никакой информации по этому багу нагуглить не удалось, как-то избавиться от него тоже не удалось, и посему вопрос — можно ли как-то сделать этот самый тег полностью, так сказать, кликабельным?
- Вопрос задан более трёх лет назад
- 18937 просмотров
- Вконтакте
Очуметь, и вправду — слепая область в пару пикселей. Немного поигравшись с примером пришел к выводу, что проблема в следующем:
— перед кликом, в слепой области, курсор находится над `а` (но не над текстом! `padding`)
— во время клика кнопка уходит вниз (`:active `) и курсор наезжает на текст
— и клик не отрабатывает, потому что нажатие началось над `а`, закончилось над текстом.
Такой же эффект, если мы при `:active` сдвигаем кнопку через `relative/top` а не через `margin`. codepen. Заметьте, что слепая область при `top:8` увеличилась на 8px.
Лечим через pointer-events codepen
Но мне кажется, что такое поведение заслуживает баг репорта, или кто-то имеет больше информации по этому поводу?
Не работает html ссылка
Всем привет! Друзья вебмастеры по возможности помогите в решении проблемы! Дело в том, что у меня возникла парадоксальная ситуация, заключается она в том, что тег <a> (ссылки) отказывается работать и не перенаправляет на нужную страницу. При разработке сайта я встроил пару менюшек. Одну горизонтальную, другую вертикальную. Обе были уже готовыми решениями и скачивались с разных сайтов. Кроме html и css в них ничего нет. Ссылки обернуты тегами ненумерованного списка <li> и не работают, хотя страницы эти есть. Когда эти же ссылки тупа размещаю в контенте все работает, а в меню отказывается.
Сайт вообще только на html и css пока. Впервые такое встречаю. Если у кого было такое или есть мнение поделитесь пожалуйста. Для наглядности можете посетить сайт http://oil.autodetals.ru, в частности на сайте есть еще одна страница about.html (О нас), также ссылка на эту страницу есть в вертикальном меню (Масла) и в самом тексте стоит ссылка на эту старницу (Мы выполняем). В менюшках эта ссылка почему то не работает, а в тексте все нормально. Помогайте! А то что-то у меня совсем «лыжи не едут».
Ссылка на комментарий
Поделиться на других сайтах
5 ответов на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
<a href="#. "> link not working
I am trying to create a set of links to specific sections in the page using the <a href=»#. «> notation, but it doesn’t seem to work. Clicking on the link seems to do nothing and right-click -> open in a new tab changes the url but does not move to a different section of the page. I am using Firefox 28.0. My links are as follows:
And they should be linking to:
Links to external webpages work fine. Placing the id=». » feature inside an <a> tag instead did not fix the problem. My webpage url is of the form http://127.0.0.1/foo/bar/baz/ . This is within a Python Django project.
Any idea why this isn’t working?
10 Answers 10
Every href needs a corresponding anchor, whose name or id attribute must match the href (without the # sign). E.g.,
An enclosing div is not necessary, if not used for other purposes.
Wow, thanks for pointing that out OP. Apparently Mozilla Firefox doesn’t associate the id attribute with a location in the HTML Document for elements other than <a> but uses the name attribute instead, and Google Chrome does exactly the opposite. The most cross-browser proof solution would be to either:
1.Give your anchor divs both a name and an id to ensure max. browser compatibility, like:
2.Only use <a> tags with the name attribute as anchors.
This will allow the on-page links to work in all browsers.
what happened with me is that the href does not work second time and that because I should Remove hash value first,,
take look how I resolved it
Just resurrecting this post because I had a similar problem and the reason was something else.
In my case it was because we had:
Obviously, don’t just remove it, because you need it if you are using relative paths.
When clicking on «Content 1» it will take directly to «Text here for Content 1. Guaranteed!
Today being March of 2022, I had a specific occurrence of this problem that illustrates how the whole web environment is an "issue" today.
Same requirement: links that go to a section of the page. It worked on my desktop’s Chrome and Firefox, but not on my client’s and neither on my Android’s Chrome.
After reading multiple threads several times for a few hours, I found out that, in order for this behavior to be the most consistent across browsers and browser versions, you have to implement both things:
a container with an id , and
an anchor with a name property,
The most important part is that the anchor tag with a name , must have content inside of it.
So, you have your links
And you have the sections you want your links to go to
Since you MUST have content inside the anchor with the name , you can then hide it in several ways. My approach was to just set it’s height to 0. In order for the height to be effective, the anchor tag’s display property should be set to block or inline-block for example.
Finally it all worked, and I have to thank the many developers who struggle with this sort of thing (which should be much easier to do, but, the web. ), and all the people who answer questions like this and share their knowledge.