[JavaScript] Div bei click background-color ändern

June · 24. Mai 2013

Div bei click background-color ändern

Hallo JavaScript Freunde,

Ich habe das folgende Problem;
Ich möchte eine alternative zur Selectbox erstellen, da die "Selected"-Systemfarbe sich nicht ändern lässt. Ich möchte gerne dass per klick auf z.B. "iPad" sich die Hintergrund farbe vom iPad div in gelb ändert und dass der Inhalt aus der div in den unteren bereich " ... "übergeben wird.

Habe bereits versuch das nur mit css zu lösen, leider erfolglos.

Code:


<style type="text/css">
 #select_box {
 width: 150px;
 border: 1px solid #000;
 }
 #entry_1 {
 width: 150px;
 height: 20px;
 }
 #entry_1:hover {
 width: 150px;
 height: 20px;
 background-color:#CCC;
 }
 
 #entry_2 {
 width: 150px;
 height: 20px;
 }
 #entry_2:hover {
 width: 150px;
 height: 20px;
 background-color:#CCC;
 }
</style>

<div id="select_box">

 <div id="entry_1">iPad</div></a>
 <div id="entry_2">Galaxy Tab</div></a>
 
</div>

<p>...</p>

Anzeige

June · 24. Mai 2013

AW: Div bei click background-color ändern

Okay habe eine alternative lösung zu javascript auf jqueryui.com gefunden, jedoch bin ich noch ratlos bezüglich der value übergabe an ...

Code:


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

<style>
 #div_container {
 border: 1px solid #000;
 width: 150px;
 overflow:hidden;
 }

 #selectable .ui-selected {
 background: #F39814; color: white;
 }

</style>

<script>
$(function() {
$( "#selectable" ).selectable();
});
</script>

<div id="div_container">
<div id="selectable">
 <div class="ui-widget-content" value="1">iPad</div>
 <div class="ui-widget-content" value="2">Galaxy Tab</div>
 <div class="ui-widget-content" value="3">Sonstige</div>
</div>
</div>

<p>...</p>

GaYlORd · 24. Mai 2013

AW: Div bei click background-color ändern

PHP:

    $(function() {

  $(  "#selectable"  ). change (function(){

    var  inhalt  = $( "#selectable" ). val ();

    $( "#id_vom_p_tag" ). html ( inhalt );

    $( "#div_container" ). css ( "background-color" , "#000" );

  )};

});

terraNova · 24. Mai 2013

AW: Div bei click background-color ändern

Nativ ohne jQuery Geschnörkel.

Code:

function selectable(mid, options) { 
 if(undefined == options.color_default
 || undefined == options.color_active) return; 
 
 var sel = {m: document.querySelector(mid), c: document.querySelector(options.content)};
 var links = [].slice.call(sel.m.children);

 var handler = function(e){
 links.forEach(function(v){ 
 if(e.clientY < (v.offsetTop + v.clientHeight) 
 && e.clientY > v.offsetTop) {
 if(v.style.backgroundColor != options.color_default) {
 v.style.backgroundColor = "";
 } else {
 v.style.backgroundColor = options.color_active;

 if(undefined != sel.c) {
 sel.c.innerHTML = v.innerHTML;
 }
 }
 } else {
 v.style.backgroundColor = "";
 }
 });
 };
 
 if(document.addEventListener) {
 sel.m.addEventListener('click', handler, false);
 } else if(document.attachEvent) {
 sel.m.attachEvent('click', handler);
 }
}
 
selectable('#select_box', {content: '#content', color_default: '', color_active: '#FFFFAA'});

June · 24. Mai 2013

AW: Div bei click background-color ändern

zunächst vielen dank

eine idee bezüglich der div value übergabe an ... ?

terraNova · 24. Mai 2013

AW: Div bei click background-color ändern

Über elem.innerHTML kannst Du - wie auch in dem Code, den ich oben gepostet habe - auf den Inhalt zugreifen (Lesen sowie Schreiben), ansonsten steht ja die jQuery-Variante über meinem Post.

Nützliche Suchen

[JavaScript] Div bei click background-color ändern

Videos zum Themenbereich