2013-11-13 5 views
0

Я создаю несколько разбиений на страницы. Каждый номер страницы содержится в собственной DIV.как сделать весь DIV clickable

В настоящее время номер страницы можно изменить. Можно ли сделать весь 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; 
} 

Вот мой PHP/HTML для одного из

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

оберните 'div' тегом' a', кстати, я предлагаю вам использовать 'span' вместо' div' и установить его в 'inline-block' –

+0

[HTML 4.01] (http: /www.w3.org/TR/html401/struct/links.html#edef-A) указывает, что встроенные элементы должны ** NOT ** иметь элементы уровня блока внутри них. Следуйте семантике, когда можете. Когда вы начнете выбирать и выбираете то, что будете следовать, вы попадете в ужасные привычки. –

ответ

1

Простой способ пагинацию Div является поставить div внутри a элемента:

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

Обратите внимание, что я также изменил >> до &gt;&gt;, чтобы код был действительным.

Вы можете подумать: «Подождите, a элементов не может содержать div элементов». Они могут при определенных условиях. В принципе, до тех пор, пока элемент внутри элемента a не содержит никакого интерактивного контента (ссылки, кнопки и т. Д.), Он отлично работает.

a определяется как то, что HTML5 вызывает "transparent element", если в нем нет interactive content. Это означает:

Элементы, требуемые частью модели контента, которая является «прозрачной», представляют собой те же элементы, которые требуются в части модели содержимого родителя прозрачного элемента, в котором находитс прозрачный элемент сам (source)

0

можно добавить #article_pagination a{ display: block; } должен работать. Greetings, Kevin

0

Поместите его внутри метки <a>. Все, что есть в таком теге, доступно для кликов и может содержать ссылку.

Лучшим способом является использование небольшого javascript. Вы можете найти код для копирования:

0

Место onclick="window.open('http://yourpage.com','_blank');" после div. Удалите ,'_blank', если вы хотите, чтобы он был открыт в родительском. Кроме того, стилизуйте его с помощью style="cursor:pointer;cursor:hand;", если вы хотите, чтобы мышка изменилась на указатель.

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