Вложенные гиперссылки без вложенных элементов ссылок в исходном коде HTML - PullRequest
Новая
       18

Вложенные гиперссылки без вложенных элементов ссылок в исходном коде HTML

14 голосов
/ 16 января 2009

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

|-------------------------------------------|
| Some text  [_link_]                            |
|-------------------------------------------|

Весь внешний прямоугольник (элемент блока) должен быть гиперссылкой. Внутри этого прямоугольника должен быть какой-то текст, а в конце этого текста должна быть еще одна ссылка.

К сожалению, вложенные ссылки (элементы A) недопустимы в (X) HTML:

12.2.2 Вложенные ссылки недопустимы

Ссылки и якоря, определенные элементом A, не должны быть вложенными; элемент A не должен содержать никаких других элементов A.

(из http://www.w3.org/TR/html401/struct/links.html#h-12.2.2),, поэтому наиболее естественный способ реализации выше 

<a href="xxx" style="display: block">
  Some text
  <a href="yyy">link</a>
</a>

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

Итак, я хотел бы спросить, как получить макет , представленный выше, с использованием HTML и CSS (но без JavaScript), но без вложенных элементов ссылки в исходном коде HTML. Было бы хорошо, если бы поведение было максимально приближено к поведению с вложенными элементами ссылок (для браузеров, которые не слишком строги в реализации стандарта HTML).

Редактировать (16-01-2009)

Уточнение: Решения, в которых используется более двух элементов связи, вполне приемлемы 

<a href="xxx" ...>Some text</a>
<a href="yyy" ...>Link</a>
<a href="xxx" ...>& nbsp;</a>
...

Ответы [ 5 ]

5 голосов
/ 16 января 2009

Вы можете попробовать что-то вроде этого: 

div.a {
  position: relative;
  background-color: #F88;
  z-index: 0;
}
a.b {
  position: relative;
  z-index: 2;
}
a.b:hover {
  background-color: #8F8;
}
a.c {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
a.c:hover {
  background-color: #88F;
}
a.c span {
  display: none;
}
<div class="a">
  foo
  <a href="bar" class="b">bar</a>
  <a href="foo" class="c"><span>baz</span></a>
</div>
1 голос
/ 16 января 2009

Возможно, это сработает? 

div.parentBox {
  position:relative;
  height:100px;
}
  a.someLink {
    position:absolute;
    top:0;
    left:0;
    height:100px;
  }

// Now just position the two spans

<div class="parentBox">
  <span class="someText">Some Text</span>
  <a href="#" class="someLink">
    <span class="linkText">Link Text</span>
  </a>
</div>
0 голосов
/ 16 января 2009

Поплавок с отрицательными полями также должен работать.

Протестировано (только в IE6): 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title>Link within link</title>
<style type="text/css">
.Parent {
width: 500px;
background-color: yellow;
}
.sub {
float: left;
margin-left: -300px;
}
.foo {
display:block;
float: left;
text-decoration: none;
}
</style>
</head>
<body>
<a href="foo" Class="foo"><div class="Parent">foo </div></a>
<div class="sub"><a href="bar">Link text</a></div>
</body>
</html>

Вы понимаете большой потенциал для путаницы пользователей.

0 голосов
/ 16 января 2009

Просто поместите обработчик события onclick на внешний элемент, который при нажатии вызывает "window.location = 'yourURLhere';"

Вы можете добавить атрибут стиля - "курсор: указатель", чтобы получить курсор в виде руки при наведении мыши.

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

РЕДАКТИРОВАТЬ: только что понял, не javascript, поэтому в этом случае, оставьте тег «a» и просто определите стиль для него в css, чтобы вы могли указать его высоту, ширину и т. Д.

0 голосов
/ 16 января 2009

В прошлом я использовал Javascript, чтобы прикрепить соответствующую функциональность к div (при условии, что это родительский элемент), чтобы при его нажатии запускалось window.location, открывая атрибут .href дочерней ссылки. .

Возможно, что-то подобное. 

// jQuery Code
$(".parentDivLink").click(function(){
  window.location = $(this).find("a.mainLink").attr("href");
});

<div class="parentDivLink">
  <a href="http://www.google.com" title="Google" class="mainLink">Click Me</a>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...