Wrap link <a>вокруг <div>

Question

Можно ли обернуть тег <a> вокруг <div> s следующим образом:

<a href=etc etc>
    <div class="layout">
        <div class="title">
        Video Type
            <div class="description">Video description</div>
        </div>
    </div>
</a>

Eclipse говорит мне, что div находятся не в том месте?Если это не разрешеноКак я могу сделать весь класс 'layout' ссылкой?

Answer 1

Эта структура будет действительна в HTML5, так как в HTML5 якоря могут переносить практически любой элемент, кроме других якорей и элементов управления формы.Большинство браузеров в настоящее время поддерживают это и анализируют код в вопросе как действительный HTML.Ответ ниже был написан в 2011 году и может быть полезен, если вы поддерживаете устаревшие браузеры (* кашель * Internet Explorer * кашель *).

---

Старые браузеры без HTML5-парсеров (например, Firefox 3.6) все равно будут запутываться из-за этого и, возможно, испортят структуру DOM.

Три варианта для HTML4 - используйте все встроенные элементы:

<a href=etc etc>
    <span class="layout">
        <span class="title">
        Video Type
            <span class="description">Video description</span>
        </span>
    </span>
</a>

Затем введите display: block

---

Используйте JavaScript и :hover:

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

И (при условии jQuery)

$('.layout').click(function(){
    // Do something
}):

И

.layout:hover {
    // Hover effect
}

---

Или, наконец, используйте абсолютное позиционирование, чтобы поместить якорь a с CSS, чтобы покрытьв целом .layout

<div class="layout">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a class="more_link" href="somewhere">More information</a>
</div>

И CSS:

.layout {
    position: relative;
}

.layout .more_link {
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-indent: -9999px;
    z-index: 1000;
}

Конечно, это не будет работать со старыми версиями IE.

Answer 2

Хотя тег <a> не может содержать элемент <div>, он может содержать и другие встроенные элементы, такие как <span>.

Когда я столкнулся с проблемой, я поменял тег div на <span>. Поскольку тег span является встроенным элементом, вам необходимо применить display:block к CSS вашего элемента <span>, чтобы он вел себя как блочный элемент <div>. Это должен быть правильный xhtml и не требующий JavaScript.

Вот пример:

<a href="#">
    <span style="display:block">
        Some content. Maybe some other span elements, or images.
    </span>
</a>

Answer 3

Другое простое решение - просто добавьте обработчик событий onclick в div следующим образом:

<div class="layout" onclick="location.href='somewhere'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
</div>

Это прекрасно работает для меня, но есть одна маленькая ошибка.Я не уверен, насколько это удобно для поисковых систем.Я боюсь, что веб-сканеры Google могут не найти эту ссылку, поэтому я также склоняюсь к включению традиционной ссылки HREF где-то в блоке, например так:

<div class="layout" onclick="location.href='destination_url'">
    <div class="title">
    Video Type
        <div class="description">Video description</div>
    </div>
    <a href="destination_url">This is a link</a>
</div>

Answer 4

Решение Тимофея правильное ... вместо того, чтобы оборачивать якорь вокруг div ... вы просто назначаете расположение элемента якоря с помощью display: block и добавляете размер и ширину якоря ...

.div_class   { width: 100px; height: 100px; }
.div_class a { width: 100px; height: 100px; display: block; }

<div class='div_class'><a href="#"></a></div> 

Answer 5

Я пытался создать пользовательское решение с использованием jQuery , которое имитировало бы то же поведение, что и тег a, для родительского DIV.

DEMO: https://jsfiddle.net/kutec/m9vxhcke/

Согласно стандарту W3C, вы не можете сделать это:

<div class="boxes">
    <a href="http://link1.com" target="_blank">
        <div class="box">
            <h3>Link with _blank attr</h3>
        </div>
    </a>
</div>

Вы должны следовать этому:

<div class="boxes">
    <div class="box">
        <h3>
            <a href="http://link1.com" target="_blank">Link with _blank attr</a>
        </h3>
    </div>
</div>

Но, следуя приведенному выше коду, вы не сможетет получить весь DIV, интерактивный:).

Правильная структура должна быть примерно такой, что также позволяет вам щелкнуть по DIV, чтобы перенаправить на указанное значение href :

<div class="boxes" data-href="http://link1.com" data-target="_blank">
    <div class="box">
        <h3>
            <a href="http://link1.com" target="_blank">Link with _blank attr</a>
        </h3>
    </div>
</div>

Простое решение :

$(function() {  
    $('.boxes a').each(function(){
        var aTag = $(this).attr('href');

        $(this).parent().attr('data-href',aTag);        

        $("[data-href]").click(function() {
            window.location.href = $(this).attr("data-href");
            return false;
        });
    })  
}(jQuery));

Динамическое решение :

(function ( $ ) { 
    $.fn.dataURL = function() {

        // variables
        var el = $(this);
        var aTag = el.find('a');
        var aHref;
        var aTarget;

        // get & set attributes
        aTag.each(function() {
            var aHref = $(this).attr('href');
            $(this).parent().attr('data-href',this);

            aTarget = $(this).attr('target');
            $(this).parent().attr('data-target',aTarget);
        });

        // imitation - default attributes' behavior on "data-" attributes
        $(el).delegate('[data-href]','click', function() {
            var loc = window.location.href;
            loc = $(this).attr("data-href");
            aTarget = $(this).attr('data-target');

            if(aTarget == "_blank"){
                window.open(loc);
            } else {
                window.location = loc;
            }

            return false;
        });     

        //removing attributes from selector itself
        el.removeAttr('data-href');
        el.removeAttr('data-target');

        // css
        $('[data-href]').css('cursor','pointer');
    };
}( jQuery ));

Окончательный вызов :

<script>
    $('.boxes').dataURL();
</script>

Надеюсь, это будет полезно:)

Answer 6

Вы просто хотите присвоить тегу "a" значение display: block;

Eclipse должным образом сообщает вам, что ваш HTML не является спецификацией (так как тег div недопустим в теге привязки).

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