Bir DIV bölüm tıklanabilir yapmak nasıl?

6 Cevap php

Ben bağlantılar Tüm kendi etiketleri içinde yer aldığı bir web sayfası yazdım. Ben de tüm düğme stilleri CSS (sınır, arka plan rengi, dolgu) ile onları yaptık. Nasıl bütün DIV bağlantısını etkinleştirmek için kliklenmelidir sağlayabilirim?

6 Cevap

Etkisi bu tür yapmak için en iyi yolu (bağlantılar düğmeleri gibi hareket yaparak) bağlantıları kendileri için css uygulamaktır. Burada temel bir örnek:

a.mylink {
display: block;
padding: 10px;
width: 200px;
background-color: #000;
color: #fff;
}

Bunu test - düğmesinin bütün tıklanabilir. Ve vb sağ tıklayarak, durum url bilgileri gibi tarayıcının normal bağlantı eylemlerini saygı

Genellikle bu aşağıdaki yollardan birini yapılır:

<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;
}

Şimdi bütün div tıklanabilir.

Javascript kullanarak bu (zaten bunu kullanmak istemiyorsanız) ancak çok easiyly jQuery olmadan bu yapabileceğini, easyness için jQuery kullanıyor, aynı zamanda oldukça kolaydır.

$('.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.

Olmayan javascript kullanıcı DIV hiçbir gerçek bağlantı varsa linki kullanınız mümkün olmayacak gibi ben çok DIV gerçek bir link koyarak öneririz.

Ben yerine CSS ile divlere ve tunning divlere içine link koyarak, sizin "bir" etiketleri için CSS yazmak zorunda düşünüyorum.

Burada kenar çubuğu örneği:

<!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>

You can see it in action here: http://bazanov.net/sidebar

Bir div tıklanabilir yapmak için. bunun içinde bir bir etiket koymak ve bir blok elemanı olarak göstermek ve bunu ben bunu her zaman yapmak div gibi aynı genişlik ve yüksekliğini verir.

Bu deneyin:

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

JQuery Eğer chustar önerilen ne benzer bir şey yapabilirim kullanma:

$(div#name).click(function(){
    window.location = $('a:first', this).attr('href');
}).hover(function() {$(this).addClass('hovered')}, 
   function () {$(this).removeClass('hovered')});

etiketler