Question

索引/存档页面的结构如下所示

<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/并且它在某种程度上无法解决所有问题。

提前谢谢。

Answer 1

如果您希望section可点击，则可以设置此规则：

section { cursor:pointer }

并指定要在点击时调用的函数：

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

更新（替代）

如果您不想使用jQuery，您可以将整个部分包装到锚点中，如下面的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用a标记（HTML5 compliant）包装您的标记代码。它看起来像这样：

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

Answer 3

另一种不推荐的方法是

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

它有时适合我。

尽管如此，您在问题中链接的答案也应该有效。

我希望它有所帮助

Answer 4

我找到了解决方案，但我仍然需要帮助。 <section onclick="document.location='<?php the_permalink() ?>'" >即使在IE7中也能正常工作。

但是，如果我在帖子中有链接或图像，他们是可点击的，他们不应该。我已经尝试将z-index for section放到z-index：99999999999999。

有什么想法吗？感谢。

wp：使某些帖子类型的<section>可点击

4 个答案: