Question

我正在创造一些分页。每个页码都包含在自己的DIV中。

目前页码是可点击的。是否有可能使该数字所在的整个DIV可以点击？

这是我的CSS

#article_pagination{
float: left;
padding: 0px 4px 0px 4px;
margin: 0px 3px 0px 0px;
border: 1px solid #999999;
display:block;
cursor:pointer;
}

#article_pagination:hover{
border: 1px solid #333333;
background-color: #99C0F3;
}

#article_pagination a:hover{
color:#FFFFFF;
}

这里是我的一个分页DIV的php / HTML

'<div id="article_pagination"><a href="'.$base_url.'/article_view.php?channel='.$channel_view.'&page='.$Next_Page.'">Next >></a></div>'

Answer 1

简单的方法是将div放在a元素中：

'<a href="'.$base_url.'/article_view.php?channel='.$channel_view.'&page='.$Next_Page.'"><div id="article_pagination">Next &gt;&gt;</div></a>'

请注意，我还将>>更改为>>以使您的代码有效。

您可能会认为，“等待，a元素不能包含div元素。”在某些条件下，他们可以。基本上，只要a元素中的元素不包含任何交互式内容（链接，按钮等），它就可以正常工作。

a被定义为HTML5称之为"transparent element"的内容，只要其中没有interactive content即可。这意味着：

内容模型中“透明”部分所需的元素与透明元素的父元素内容模型中透明元素所在的部分所需的元素相同(source)

Answer 2

你可以补充一下

#article_pagination a{
display: block;
}

应该管用。问候，凯文

Answer 3

将其放在<a>标记内。此类标签中的任何内容都是可点击的，并且可以附加链接。

更好的方法是使用一点点javascript。你可以找到一些copypaste代码：）

Answer 4

将onclick="window.open('http://yourpage.com','_blank');"放在div之后。如果要在父级中打开，请删除,'_blank'。此外，如果您希望鼠标更改为指针，请使用style="cursor:pointer;cursor:hand;"对其进行样式化。

如何使整个DIV可点击

4 个答案: