Url Hash с HTML-тегом Base - PullRequest
Новая
       23

Url Hash с HTML-тегом Base

9 голосов
/ 18 марта 2009

window.location.hash

Когда я использую ссылку для действия JavaScript, я обычно делаю что-то вроде этого: 

<a href="#">Link Text</a>

Таким образом, когда кто-то нажимает на ссылку до загрузки страницы, ничего страшного не происходит.

Базовый тег HTML

В моем текущем проекте я использую эту же конструкцию, но с базовым тегом: 

<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="#">Link Text</a>
</body>
</html>

Однако, если URL страницы: 

http://example.com/dir/page

нажав на ссылку, вы перейдете к 

http://example.com/#

вместо 

http://example.com/dir/page#

Как я могу это исправить?

Ответы [ 7 ]

9 голосов
/ 18 марта 2009

Либо удалите тег base, либо измените атрибуты href на полную квалификацию. То, что вы наблюдаете, - это намеченное поведение, когда вы смешиваете base с a элементами.

3 голосов
/ 18 марта 2009

Если вы склонны использовать тег, другое решение состоит в том, чтобы не использовать # в качестве цели href (если вы не укажете один из них, это приведет к прыжку наверх страницы, что я считаю нежелательным). Что вы можете сделать, это: 

<a href="javascript:">Some Link that Goes nowhere</a>

На самом деле, если вы не делаете что-то, требующее, чтобы это был тег, диапазон будет лучшим выбором:

CSS: 

.generic_link {
  text-decoration:underline;
}
.generic_link:hover {
  text-decoration:none;
}

HTML: 

<span class="generic_link">Something that really isn't a link</span>
1 голос
/ 18 марта 2009

Если нет URL-адреса, подходящего для пользователя, не поддерживающего JavaScript, не используйте <a>. <a> теги для ссылок на другие страницы.

Любой видимый элемент HTML может иметь щелчок мыши и не будет иметь проблемы, которую вы описываете.

0 голосов
/ 30 декабря 2017

Вы можете просто удалить атрибут href из тега <a>. 

<a href="#"> => <a>
0 голосов
/ 24 января 2016

У меня была такая же проблема в прошлом.
У меня была ссылка, которую я хотел оставить пустой, чтобы перейти на текущую страницу.
Без элемента base html это будет просто элемент a с href="#".

Мой пример без использования элемента base html, 

<li>
    <a href="#"><div>The text of my Link</div></a>
</li>

Тот же пример с решением, которое я нашел, 

<li style="cursor: pointer !important;">
    <a href="#" style="pointer-events: none;"><div>The text of my Link</div></a>
</li>

Это решение использует css только для отключения ссылки.

С первым правилом CSS cursor: pointer !important; я гарантирую, что эта ссылка будет иметь правильный (для моего случая) значок указателя.
Со вторым правилом pointer-events: none; я гарантирую, что эта ссылка не будет кликабельной.
Вы можете найти больше об этом правиле, следуя этой ссылке .

0 голосов
/ 11 февраля 2015 
<html>
<head>
    <base href="http://example.com/" />
</head>
<body>
    <a href="./dir/page#">Link Text</a>
</body>
</html>
0 голосов
/ 18 марта 2009

Возврат false для события onclick, чтобы отключить ссылку: 

<a href="#" onclick="doSomething(); return false">Link Text</a>

(Это всего лишь пример того, как вы делаете это встроенным. Но старайтесь избегать встроенных объявлений и используйте методы прогрессивных улучшений .)

...