Как определить большую сложную структуру HTML как ссылку? - PullRequest
Новая
       2

Как определить большую сложную структуру HTML как ссылку?

5 голосов
/ 11 апреля 2011

Рассмотрим следующий HTML-код: 

<ul>
    <li>
        <h2>Item 1</h2>
        <p class="subline">Meta information bla bla</p>
        <div class="description">
            <p>Paragraph one</p>
            <p>Paragraph two</p>
        </div>
    </li>
    <!-- More ... -->
</ul>

Я хотел бы связать каждую из li с ссылкой.В качестве подтверждения концепции я даю вам этот недопустимый код: 

<ul>
    <li>
        <a href="http://www.google.com/search?q=test+1">
            <h2>Item 1</h2>
            <p class="subline">Meta information bla bla</p>
            <div class="description">
                <p>Paragraph one</p>
                <p>Paragraph two</p>
            </div>
        </a>
    </li>
    <!-- More ... -->
</ul>

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

РЕДАКТИРОВАТЬ: Оказывается, приведенный выше код действителен в HTML5.Проблема решена.

Мне нужно найти другое решение:

Вставить тег a в каждый элемент уровня блока

Я рассмотрел добавление идентичных *Теги 1021 *, p.subline > a и div > p > a, но мне бы хотелось иметь состояние наведения с использованием :hover, которое влияет на всю область ссылки, поэтому оно не будет работать.

Использованиесобытие onclick

Я использовал Javascript для решения этой проблемы раньше (li.onclick = function() { window.location.href = ...), но тогда я не могу использовать среднюю клавишу мыши, чтобы открыть в новом окне.Это влияет на удобство использования, зависит от Javascript и, честно говоря, очень раздражает.

Включение элементов уровня блока в строку: 

<ul>
    <li>
        <a href="http://www.google.com/search?q=test+1">
            <span class="title">Item 1</span>
            <span class="subline">Meta information bla bla</span>
            <span class="description">
                <span>Paragraph one</span>
                <span>Paragraph two</span>
            </span>
        </a>
    </li>
    <!-- More ... -->
</ul>

Скорее всего, display: block потребуетсяк некоторым или всем этим промежуткам, чтобы заставить их вести себя.

Это действительный HTML, но он действительно ужасен.

Кто-нибудь знает лучший способ решения этой проблемы?

Ответы [ 4 ]

4 голосов
/ 11 апреля 2011

Используйте HTML5:

http://davidwalsh.name/html5-elements-links

HTML5 представляет более простую линию мышления с HTML, чем XHTML.И, честно говоря, это очень необходимое упрощение.Одним из таких упрощений является возможность оборачивать элементы блочного уровня, такие как DIV, H-теги и P, базовыми элементами A.Вы правильно прочитали: оберните элементы уровня блока тегами А.

Лично я никогда не беспокоился об этом.Да, это технически неверно, но я фанат прагматической проверки.

3 голосов
/ 11 апреля 2011

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

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

http://jsfiddle.net/peteorpeter/J4sT9/

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

Хорошо, как только вы почувствуете рвотный привкус во рту после просмотра этого беспорядка, я думаю, вам следует:

  • Охватите красивую семантическую разметку, с которой вы начали
  • Добавьте туда ссылку, которая выглядит красиво и кликабельно
  • В JS скройте ссылку выше и перенаправляйте клики от <li> к скрытой ссылке
  • В JS (или CSS 2+) улучшите эффект наведения на <li>

Слегка измененная разметка: 

<ul>
    <li>
        <h2>Item 1</h2>
        <p class="subline">Meta information bla bla</p>
        <div class="description">
            <p>Paragraph one</p>
            <p>Paragraph two</p>
        </div>
        <a class="link-for-no-JS" href="buystuff">Item 1</a>
    </li>
    <!-- More ... -->
</ul>

Ничего особенного, только базовое прогрессивное улучшение. Люди с менее способными браузерами должны искать ссылку и могут не получить никаких эффектов при наведении (но это все же мог бы быть красивый, удобный интерфейс); люди с более продвинутыми браузерами получают еще более интуитивный и отзывчивый опыт.

1 голос
/ 11 апреля 2011

Раньше я решал эту проблему, поместив ссылку в заголовок, а затем распространив ее на li с помощью Javascript.Таким образом, большинство людей получают желаемый эффект, и если JS выключен, он все равно работает.Когда вы распространяете ссылку, установите класс.Это немного сложнее, но это правильный HTML.Зависит от ваших приоритетов. 

// psuedocode
on document ready {
   els = getElementsByClassName("mylinks")
   for el in els {
      li = el.parentNode.parentNode;
      li.onclick = function() {window.location = el.href}
      li.className = "liHover";
   }
}
0 голосов
/ 11 апреля 2011

Есть еще один взлом, который может работать в зависимости от ситуации.Вытяните элемент a из естественного потока рендеринга, используя position: absolute, и сделайте его высоту и ширину достаточно большими, чтобы покрыть данную область.Также может пригодиться высокое значение z-index.Хотя это взлом.

...