Смена стилей объектов?
Всем доброго времени суток.
В программировании я не силен и поэтому решился задать вопрос знающим. Есть 4 дива, у каждого картинка и подпись. Когда нажимаем на один, то у него меняется цвет фона, при нажатии на другой - тоже самое, но предыдущий возвращается в исходное положение. <style type="text/css"> .ugol_inv {border: red solid 5px;} </style> <script type="text/javascript"> var lastColor = null; function setColor( ug ) { if (lastColor) lastColor.className = lastColor.className.replace(' ugol_inv', ''); ug.className += ' ugol_inv'; lastColor = ug; } </script> <img src="ugol" onclick="setBorderU(this);"> <img src="ugol" onclick="setBorderU(this);"> <img src="ugol" onclick="setBorderU(this);"> <img src="ugol" onclick="setBorderU(this);"> Все это хорошо, но не могу дотумкать, как сделать так, чтобы при загрузке страницы первый див уже был "выделенным", а при нажатии на другие соответственно становился "не выделенным". Заранее спасибо за ответы. |
У меня вЫшло так
<style> div { border:1px solid red;float:left;width:100px;height:100px; margin-right:10px; } .red{background:red;} .blue{background:blue;} </style> </head> <body> <div>1</div> <div class="blue">2</div> <div>3</div> <div>4</div> <script> divs=document.getElementsByTagName('div') function handler( e ){ for(i=0;i<divs.length;i++){ divs[i].style.backgroundColor='white' } //alert(this.innerHTML) this.style.backgroundColor='red' } divs=document.getElementsByTagName('div') eventType = document.addEventListener ? ["addEventListener", ""] : ["attachEvent", "on"]; for( var i = 0; i < divs.length; i++ ) { divs[ i ][ eventType[ 0 ] ]( eventType[ 1 ] + "click", function( e ){ e = e || window.event; handler.call( e.target || e.srcElement, e ); }, false ); } </script> Кто знает как проще сделать эту задачу??? |
пасиб, работает
только вот IE просит разрешения на исполнение ActiveX :( попробуем подождать еще вариантов :) |
Цитата:
<style> div.green {background: green; color: yellow} div.yellow {background: yellow; color: green} </style> <div id="myDiv" style="cursor: pointer"> <div>first content</div> <div>second content</div> <div>third content</div> <div>fourth content</div> </div> <script> (function wizard() { var div = myDiv.getElementsByTagName('div'); var dl = div.length; var curDiv = div[0]; getCurDiv = function() {return curDiv} setCurDiv = function(value) {curDiv = value} div[0].className = 'green'; for (var i = 1; i < dl; i++) { div[i].className = 'yellow' } })(); myDiv.onclick = function (e) { var e = e || window.event; var target = e.target || e.srcElement; if (target != getCurDiv()) { target.className = 'green'; getCurDiv().className = 'yellow' setCurDiv(target); } } </script> |
Без скриптов можно сделать такое.
<style> div {background: yellow; color: green; cursor: pointer} div:hover {background: green; color: yellow} </style> <div>first content</div> <div>second content</div> <div>third content</div> <div>fourth content</div> Или такое <style> div {background: yellow; color: green; cursor: pointer} div:active {background: green; color: yellow} </style> <div>first content</div> <div>second content</div> <div>third content</div> <div>fourth content</div> |
bes подправь скрипт,не работает :(
|
В хроме работает, в IE нет (в этих двух браузерах дело не в myDiv вместо document.getElementById('myDiv') ).
IE почему-то не получает target в функции click(), почему не могу понять. |
bes,
function click(e){ if(!e) e = event; var target = e.target || e.srcElement ..... |
melky, IE8 это не помогает
|
ActiveX (да и вообще замечания от браузера) многие не продвинутые пользователи пугаются :(
вообще у меня идет связка дивов с select option (я их прячу и вывожу данные дивами). у одного option имеется selected, может к этому сделать привязку? |
Часовой пояс GMT +3, время: 12:47. |