Как сделать раздел DIV активируемым по щелчку?
2
/ \ union 4
1 3
((1 union 3) union 4) incl 2
^^^^^^^^^......................................assume it works
(((E union E) union 3 incl 1) union 4) incl 2
^^^^^^^^^.....................................still E
(E union E) union 3 incl 1 = E union 3 incl 1 = 3 incl 1
Следующее поддерево должно быть 3 , включая 1
( 3 )
( \ union D ) incl 2
( 1 )
(((1 union E) union 4) incl 3) incl 2
^^^^^^^^^.......................................expand
(((( (E union E) union E) incl 1) union 4) incl 3) incl 2
^^^^^^^^^^^^^^^^^^^^^^^^^^..................still 1
((1 union 4) incl 3) incl 2
^^^^^^^^......................................continue
((((E union E) union 4) incl 1) incl 3) incl 2
^^^^^^^^^^^^^^^^^^^^^^^^^^^^..........expand 1 union 4
((4 incl 1) incl 3) incl 2
^^^^^^^^^^^^^^^^^^^^^^^^^............Final union result
Благодаря @Rex Керр вытягивает шаги. Я заменяю второй шаг фактическим этапом выполнения, который может дать более четкое описание функции Scala union.
5 ответов
Лучший способ добиться такого эффекта (заставить ссылки действовать как кнопки) - это применить CSS к самим ссылкам . Вот простой пример:
a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}
Проверьте это - вся кнопка активна. И он учитывает обычные действия браузера со ссылками, такие как щелчок правой кнопкой мыши, информация об URL-адресе статуса и т. Д.
Я думаю, вам пришлось написать CSS для ваших тегов «a» вместо того, чтобы помещать ссылки в блоки div и настраивать блоки с помощью 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
Разобрался, как это сделать. В теге создайте свойство onclick, затем в этом свойстве установите window.location = (куда вы хотите перейти). Пример:
<DIV OnClick="window.location='http://stackoverflow.com'">
Content
</DIV>
Используя jQuery, вы можете сделать что-то похожее на то, что предложил чустар:
$(div#name).click(function(){
window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')},
function () {$(this).removeClass('hovered')});
Обычно это делается одним из следующих способов:
<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 нет действительной ссылки.