Ответ 1

Как описано в @j08691, в синтаксисе HTML запрещены вложенные элементы a. Спецификации HTML не говорят, почему; они просто подчеркивают правило.

С практической стороны браузеры эффективно применяют это ограничение в своих правилах синтаксического разбора, поэтому, в отличие от многих других проблем, нарушение спецификации просто не работает. Парсеры эффективно обрабатывают начальный тег <a> внутри открытого элемента a, как неявное завершение открытого элемента перед запуском нового.

Итак, если вы пишете <a href=foo>foo <a href=bar>bar</a> zap</a>, вы не получите вложенных элементов. Браузеры будут анализировать его как <a href=foo>foo</a> <a href=bar>bar</a> zap, т.е. Как две последовательные ссылки, за которыми следует какой-то простой текст.

Нет ничего неотъемлемо нелогичного с вложенными элементами a: они могут быть реализованы, так что нажатие на "foo" или "zap" активирует внешнюю ссылку, нажатие на "bar" активирует внутреннюю ссылку. Но я не вижу причины использовать такую ​​структуру, и разработчики HTML, вероятно, тоже не увидели ее, поэтому они решили запретить ее и тем самым упростить вещи.

(Если вы действительно хотите имитировать вложенные ссылки, вы можете использовать обычную ссылку как внешнюю ссылку и элемент span с подходящим обработчиком событий как внутреннюю ссылку). В качестве альтернативы вы можете дублировать ссылки: <a href=foo>foo</a> <a href=bar>bar</a> <a href=foo>zap</a>.)

Ответ 2

Вложенные ссылки являются незаконными.

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

Ответ 3

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

Вот пример кода, который я создал.... http://codepen.io/thinkbonobo/pen/gPxJGV

Вот часть html:

Пример ссылки, встроенной в ссылку....

<div class=panel onclick="alert('We\'ll hi-ii-ii-ide')">
  If you say run<br>
  <button onclick="app.hitMe(event)">more</button><br>
  <br>
  And if you say hide...<br>
</div>

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

Ответ 4

Недействительный HTML.

Вы не можете вложить элементы a.

Таким образом, по определению поведение undefined.

Ответ 5

Вы можете использовать тег объекта для решения этой проблемы. такие как

<a><object><a></a></object></a>

Ответ 6

У меня была та же проблема, что и у @thinkbonobo, и я нашел способ сделать это без JavaScript:

.outer {
  position: relative;
  background-color: red;
}
 
.outer > a {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
 
.inner {
  position: relative;
  pointer-events: none;
  z-index: 1;
}
 
.inner a {
  pointer-events: all;
}

<div class="outer">
  <a href="#overlay-link"></a>
  <div class="inner">
    You can click on the text of this red box. It also contains a
    <a href="#inner-link">W3C compliant hyperlink.</a>
  </div>
</div>

Ответ 7

Не делай этого так. Я столкнулся с той же проблемой в своем приложении. Вы можете просто добавить тег <div> в верхнем и <a> тегах на уровне ребенка. что-то вроде:

<div id="myDiv"><a href="#"></a>
     <a href="#"></a>
</div>

убедитесь, что вы добавили событие click для myDiv в свой файл script.

window.location.href = "#dashboardDetails";

Ответ 8

Вы не можете вставить теги 'a'. Вместо этого установите внешний контейнер как "position: relative" и "a" как "position: absolute" и увеличьте его значение z-index. Вы получите тот же эффект.

<div style="position:relative">
<a href="page2.php"><img src="image-1.png"></a>
<a style="position:absolute;top:0;z-index:99" href="page1.php"></a>
</div>

Ответ 9

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

OnClick внутреннего события, используйте e.stopPropagation();

Ответ 10

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

    <style>
    * {
      padding: 0;
      margin: 0 border:0;
      outline: 0;
    }

    .outer_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      text-shadow: 0 1px 0 #616161;
      box-shadow: 1px 1px 3px #000;
      transform: translateY(0);
      transition: background 250ms;
    }
    .inner_anchor {
      display: inline-block;
      padding: 5px 8px;
      margin: 2px;
      border: 1px solid #252632;
      border-radius: 3px;
      background: #1c1d26;
      color: #fff;
      transform: translate(0px);
    }
    .inner_anchor:hover {
      background: #647915;
    }
    </style>


<a href="#">ItemX<object><a class="elim_btn" href="#" title='Eliminate'>&times;</a></object></a>

Ответ 11

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

<a href="#">
 <object>
   <a href="#"></a>
 </object>
</a>

Ответ 12

<a href="#"><object>
 <a href="#">this should do the trick</a>
</object></a>

Ответ 13

Это плохой способ кодирования, но вы можете попробовать это -

< a href= "1" aaaa < table <t> <a> <a> < → → > </ > </td> <;/тр > </таблица > </Л;/а >