#1 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 " <p>...</p> "ü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> + Multi-Zitat Zitieren
#2 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 <p>...</p> 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> + Multi-Zitat Zitieren
#3 24. Mai 2013 Zuletzt bearbeitet: 27. 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" ); )}; }); 1 Person gefällt das. + Multi-Zitat Zitieren
#4 24. Mai 2013 Zuletzt bearbeitet: 26. 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'}); 1 Person gefällt das. + Multi-Zitat Zitieren
#5 24. Mai 2013 AW: Div bei click background-color ändern zunächst vielen dank eine idee bezüglich der div value übergabe an <p>...</p> ? + Multi-Zitat Zitieren
#6 24. Mai 2013 Zuletzt bearbeitet: 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. + Multi-Zitat Zitieren