Блог

Рассмотрим следующий 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 тег в каждый элемент уровня блока

Я рассматривал возможность добавления идентичных тегов h2 > a , 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, но он действительно ужасен.

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

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

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

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

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

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

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

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>
  

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

В прошлом я решал именно эту проблему, помещая ссылку в заголовок, а затем распространяя ее на 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";
   }
}
  

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