сора: сделать <section> кликабельным для определенных типов почтовых

Структуры страницы индекса/архива выглядит следующим образомсора: сделать <section> кликабельным для определенных типов почтовых

<article <?php post_class(); ?> > 
    <header> 
     <h1><a href=""></a></h1> 
    </header> 
    <section> 
     <?php the_content(); ?> 
    </section> 
    <footer> 
    </footer> 
</article>

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

Как вы думаете? Что было бы лучшим решением для этого?

Я пробовал это http://www.avtex.com/blog/2012/01/27/how-to-make-an-entire-div-clickable-with-css/, и он не работает, как-то это все испортит.

Заранее спасибо.

источник

2015-05-06 Kal-El

Что вы хотите сделать, если нажать? Единственный способ сделать это в CSS - это обернуть тег раздела в якорь с помощью href! – lshettyl

при нажатии на раздел -> сообщение. ваше решение не работает на ie7 или ie8 –

Попробуйте CSS для 'a' tag' {display: block;} ' – lshettyl

Если вы хотите section быть интерактивными вы можете установить правило:

section { cursor:pointer }

и назначить функцию можно назвать по щелчку:

$('section').on('click', function() { 
    // your function 
});

UPDATE (Alternative)

Если вы не хотите использовать jQuery, вы можете просто обернуть весь раздел в якорь, как показано ниже:

section { 
 
    width: 200px; 
 
    height: 150px; 
 
    background-color: #d8d8d8; 
 
}

<a href="#"> 
 
    <section> 
 
    Section contents 
 
    <section> 
 
</section>

источник

2015-05-06 14:20:29 kapantzak

Это отвечает на вопрос. Однако из вопроса не ясно, намерение. – jono

Альтернатива обертывания всего объекта в ссылке не работает в ie7 или ie8. –

Посмотрите на мой ответ ниже, он работает, но у него есть глюк, я не знаю, как его исправить. –

Вы можете обернуть раздел тег с a тегом (HTML5 compliant). Это будет выглядеть следующим образом:

<a href="http://google.com"> 
    <section> 
    <?php the_content(); ?> 
    </section> 
</a>

источник

2015-05-06 14:26:15 kel

не работает, если в сообщении есть изображение. Я просто попробовал. –

Я не уверен, что происходит с вашими сообщениями, но это работает полностью. Вот демонстрация, http://jsfiddle.net/rLe4L7u3/. Вы должны использовать инструменты разработчика своей консоли, чтобы проверить, что происходит в вашем сообщении. – kel

Работает только для IE9 +, к сожалению, мне это нужно, чтобы работать и для ie8 и ie7. –

Другим нерекомендованным способ

<article <?php post_class(); ?>> 
    <header><h1><a href=""></a></h1> 
    <a href="#"> 
     <section> 
      <?php the_content(); ?> 
     </section> 
    </a> 
    <footer> 
    </footer> 
</article>

Это работает для меня иногда.

Хотя ответ, который вы связываете в своем вопросе, тоже будет работать.

Я надеюсь, что это помогает

источник

2015-05-06 14:30:53 pabgaran

, он имеет тот же результат, что и ответ kel. он не работает, если это изображение в сообщении. –

Да, он быстрее меня! Во всяком случае, почему бы не сработать сообщение, которое вы связываете в своем вопросе? – pabgaran

Я нашел решение, но я по-прежнему нуждаются в помощи. <section onclick="document.location='<?php the_permalink() ?>'" > Работает даже в IE7.

Но если у меня есть ссылки или изображения в сообщении, они как-то могут быть интерактивными, и их не должно быть. Я попытался поместить z-index для раздела в z-index: 99999999999999.

Любые идеи? Благодарю.

источник

2015-05-07 08:36:33

сора: сделать <section> кликабельным для определенных типов почтовых

ответ

Смежные вопросы