Верстка с сылкой внутри которой ещё ссылки)

Question

Верстка с сылкой внутри которой ещё ссылки)

Рейтинг: 0Ответов: 1Опубликовано: 07.04.2023

Блок с ссылкой в ссылке) Как-то так, просто чтоб наглядней было выглядит структурно так это так

    <div class="container_flex">

            <div class="flex_items" style="display: flex;">
                <a href="test_index.html" style="background-color: #003eff">
                <div class="flex_block" >
                    <h1 style="color: #fff">Название товара</h1>
                </div>
                <div class="flex_block" style="background-color: #88a0b9;">
                    <a href="#"> Скачать </a>
                    <a href="#"> Просмотреть </a>
                </div>
                </a>
            </div>

        </div>

Как можно сделать чтоб ссылка которая как-бы контейнер, работала по всему блоку включая правый, кроме ссылок "Скачать", "Просмотреть"? Те надо чтоб на своё ссылались Заранее спасибо, надо бы чтоб ссылку одну использовать можно было, тут блок в примере не тот что по факту но структурно пхож

css html

Источник: Stack Overflow на русском

Answer 1

▲ 1

Как можно сделать чтоб ссылка которая как-бы контейнер, работала по всему блоку включая правый, кроме ссылок "Скачать", "Просмотреть"? Те надо чтоб на своё ссылались

Просто так вкладывать интерактивные элементы (у тебя ссылки) в другие интерактивные элементы (у тебя ссылка) запрещается. Но разрешается "обертка" <object>.

https://www.tune-it.ru/web/leksa/blog/-/blogs/1996233

Т.ч. я поменял разметку... Добавил немного стилей... И написал срипт для раздельной обработки ссылок.

document.querySelector('.parent').addEventListener('click', e => {
  const o = e.target
  const a = ['load', 'view']
  if (a.some(c => o.classList.contains(c))) {
    e.stopPropagation()
    if (o.classList.contains('load')) console.log('load')
    if (o.classList.contains('view')) console.log('view')
    return
  }
  // для демонстрации, потом убрать
  e.preventDefault()
  console.log('parent')
})

.parent {
  display: flex;
  border: 2px solid red;
}

<div class="container_flex">

  <div class="flex_items" style="display: flex;">
    <a href="test_index.html" class='parent' style="background-color: #003eff">
      <div class="flex_block">
        <h1 style="color: #fff">Название товара</h1>
      </div>
      <div class="flex_block" style="background-color: green;">
        <object>
          <a href="#" class='load'> Скачать </a>
          <a href="#" class='view'> Просмотреть </a>
        </object>
      </div>
    </a>
  </div>

</div>

Верстка с сылкой внутри которой ещё ссылки)

Ответы