Bir html onay kutusu gibi davranan bir div oluşturma

Tıklatmadaki açmak (kapalı bir html onay kutusu gibi) açmak ve kapatmak ve css kullanarak görünür değişiklikler yapmak istiyorum. Javascript olmadan bu mümkün mü yoksa Javascript kullanmak zorunda mıyım?Bir html onay kutusu gibi davranan bir div oluşturma

Böyle bir komut dosyası oluşturduysanız lütfen paylaşın.

Yardımlarınız için şimdiden teşekkür ederiz.

kaynak

2011-04-02 Php Beginner

JavaScript olmaksızın mümkün değildir (sunucuya her bağlantıyı göndermezseniz ve div'i değiştirmek için php'yi kullanın - umarım yapmak istemezsiniz). JavaScript'i etkinleştirilmemiş kullanıcılar için siteyi kullanılamaz hale getireceğinden, onay kutularıyla gerçekten yapamadığınız sürece bunu yapmanızı önermem. – Czechnology

Gerçekte, neredeyse bir başka kutunun üzerine gerçek bir onay kutusu yerleştirerek ve% 0 opaklık ve gerektiğinde bir yükseklik ve genişlik vererek bunu yapabilirsiniz.Ancak, onay kutusu durumuna bağlı olarak görsel bir şey yapmak, sınırlı olduğunu düşündüğüm "kontrol edilen" sözde sınıf için tarayıcı desteğine güvenir. – Pointy

Peki javascript kullanmanız gerekiyor ve prety basittir. Sadece hareket halindeki div'un css stilini değiştirmelisiniz.

<a href='javascript: toggle()'>toggle</a> 
<div id='div1' style='display:none'> 
Don't display me 
</div> 

<script> 
function toggle(){ 
    var div1 = document.getElementById('div1') 
    if (div1.style.display == 'none') { 
     div1.style.display = 'block' 
    } else { 
     div1.style.display = 'none' 
    } 
} 
</script>

kaynak

2011-04-02 12:48:25 heroix

Sorunuzu yanıtlamaya çalışıyorum ve biraz jQuery (1.5.2) kodu oluşturdum. Bu, sadece bir göz atmanıza ve bana aradığınız şeyin ne olduğunu söylemenize yardımcı olur mu ?, yoksa başka bir şey istiyorsanız bunu da yapabilirim. on_off kimliğine sahip div öğesinin tıklatılmasıyla ilgili (buradaki kodu kullanarak da seçebilirsiniz!) Ve (on_off_on) ve kapalı (on_off_off) öğelerini tıklatıp bu seçenekleri de seçerek bu jsFiddle bağlantısına erişebilirsiniz. için live demo veya aşağıdaki komut dosyasını görebilirsiniz -

HTML -

<html> 
    <head> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script> 
    </head> 
    <body> 
      <div id="on_off" class="on_off_on" >ON</div> 
    </body> 
</html>

CSS -

div.on_off_off 
{ 
background: rgb(150,110,120); 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
padding: 5px 10px; 
border: 3px solid rgb(180, 140, 150); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
color: #fff; 
display: inline; 
} 
div.on_off_on 
{ 
background: rgb(110,150,120); 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
padding: 5px 10px; 
border: 3px solid rgb(140, 180, 150); 
border-radius: 5px; 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
color: #fff; 
display: inline; 
}

jQuery Kodu -

$(document.body).ready(function() { 
    $(function() { 

     var main_obj_id = 'on_off'; 
     var on_class = 'on_off_on'; 
     var off_class = 'on_off_off';   

     $('#' + main_obj_id).click(function() { 
       if ($(this).is('.' + on_class)) { 

       $(this).removeClass(on_class); 
       $(this).addClass(off_class); 
       $(this).html('OFF'); 

       } else { 

       $(this).removeClass(off_class); 
       $(this).addClass(on_class); 
       $(this).html('ON');     

       } 
     }); 
    }); 
});

Bu yardımcı olur umarım!

<input name="checkbox1" id="checkbox1" type="checkbox"> 
<label for="checkbox1"> 
    Click me 
</label>

ve css:

kaynak

2011-04-02 14:52:36

Sen tıklanabilir istediğiniz div sarmak için etiket elemanı kullanarak javascript olmadan bunu uygulamak

input { 
    display:none; 
} 
:checked + label { 
    border: 1px solid rgba(81, 203, 238, 1); 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
}

css stil bir örnek için buraya bakın http://jsfiddle.net/vyP7c/761/

kaynak

2015-01-27 20:26:53

Bunu onay kutularını gizleyerek ve etiketlerini şu şekilde biçimlendirerek yalnızca CSS koduyla kolayca yapabilirsiniz:

HTML

<div id="checkboxes"> 
    <input type="checkbox" name="rGroup" value="1" id="r1" checked="checked" /> 
    <label class="whatever" for="r1"></label> 
    <input type="checkbox" name="rGroup" value="2" id="r2" /> 
    <label class="whatever" for="r2"></label> 
    <input type="checkbox" name="rGroup" value="3" id="r3" /> 
    <label class="whatever" for="r3"></label> 
</div>

CSS

.whatever{ 
    background-color: red; 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
} 

#checkboxes input[type=checkbox]{ 
    display: none; 
} 

#checkboxes input[type=checkbox]:checked + .whatever{ 
    background-color: green; 
}

Burada eylem bu basit koda göz atabilirsiniz: Bu yardımcı olur
JSFiddle

Umut! :)

kaynak

2015-04-01 13:38:58 nicosemp

Bu harika görünüyor, bunu yaptığınız için teşekkürler! # Onay kutularının kodunun rolü nedir? Keman onsuz aynı şekilde çalışır. –

Sadece özgüllüğü arttırır. CSS'de sadece 'input [type = checkbox] 'seçeneğini kullanırsanız, kuralı sayfadaki herhangi bir onay kutusuna uygularsınız. '# Onay kutularını 'kullanarak sadece' div' içinde' id = 'onay kutularına sahip olan onay kutularına uygularsınız. – nicosemp

Bir html onay kutusu gibi davranan bir div oluşturma

cevap

İlgili konular