Я написал веб-страницу, в которой все ссылки содержатся в их собственных тегах. Я также сделал для них все стили кнопок с CSS (граница, цвет фона, дополнение). Как активировать ссылку DIV для активации ссылки?
Лучший способ сделать такой эффект (сделать ссылки похожими на кнопки) – это применять css к самим ссылкам. Вот пример:
a.mylink { display: block; padding: 10px; width: 200px; background-color: #000; color: #fff; } Протестируйте его – вся кнопка нажата. И он уважает обычные действия с ссылками на браузер, такие как щелчок правой кнопкой мыши, информация о статусе статуса и т. Д.
Обычно это делается одним из следующих способов:
<div class='link_wrapper'> <!-- there could be more divs here for styling --> <a href='example.com'>GOto Example!</a> </div> .link_wrapper{ somestyles: values; height: 20px; /*or whatever*/ width:auto; padding:0px; } .link_wrapper a{ line_height:20px; /*same as .link_wapper*/ margin:0px; }
Теперь весь div можно щелкнуть.
Использование Javascript также довольно просто, это использование jQuery для удобства, однако вы можете очень легко сделать это без jQuery (если вы еще не используете его).
$('.link_wrapper') .style('cursor', 'pointer') //very important, indicate to user that div is clickable .click( function() { window.location = $(this).find('a').attr('href'); }); //Do click as if user clicked actual text of link.
Я настоятельно рекомендую поместить фактическую ссылку в DIV, поскольку пользователь, не являющийся javascript, не сможет использовать ссылку, если в DIV нет реальной ссылки.
Я думаю, вам пришлось писать CSS для ваших тегов «a», вместо того чтобы помещать ваши ссылки в div и настраивать divs с помощью CSS.
Вот пример боковой панели:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /*********************/ /* SIDEBAR */ /*********************/ #sidebar { width: 160px; float: left; margin-top: 10px; } #news { margin: 0px; padding: 0px; list-style: none; font-size: 1.2em; border-top: 1px dashed #294E56; border-right: 1px dashed #294E56; } #news li { display: inline; } #news .title { font-weight: bold; display: block; color: #666666; } #news a { text-decoration: none; display: block; padding: 5px; border-bottom: 1px dashed #294E56; color: #73AFB7; line-height: 110%; background: #FFFFFF url(images/bg/bg_link.png) no-repeat right top; } /* hack for IE 6 < to make entire block clickable */ * html #news a { height: 1px; } #news a:hover { color: #000000; background-image: url(images/bg/bg_link_h.png); } </style> </head> <body> <div id="sidebar"> <ul id="news"> <li><a href="#"><span class="title">Virgo: It's Your Month</span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Your Feedback </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">This Month's Survey </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Indoor lawns: sod or seed? </span>Lorem ipsum dolor sit.</a></li> <li><a href="#"><span class="title">Lorem Ipsum </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Adipiscing elit </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Euismod tincidunt </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li> <li><a href="#"><span class="title">Dolor site amet </span>Lorem ipsum dolor site amet.</a></li> </ul> </div> </body> </html>
Вы можете увидеть это в действии здесь: http://bazanov.net/sidebar
Чтобы сделать div интерактивным. поместите в него тег и отобразите его как элемент блока и придайте ему ту же ширину и высоту, что и div, я делаю это все время.
Попробуй это:
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
Используя jQuery, вы можете сделать что-то похожее на то, что предложил chustar:
$(div#name).click(function(){ window.location = $('a:first', this).attr('href'); }).hover(function() {$(this).addClass('hovered')}, function () {$(this).removeClass('hovered')});
Я понял, как это сделать. В теге создайте свойство onclick, затем в этом свойстве установите window.location = (где вы хотите перейти). Как в:
<DIV OnClick="window.location='http://stackoverflow.com'"> Content </DIV>