Смена стилей объектов?
Всем доброго времени суток.
В программировании я не силен и поэтому решился задать вопрос знающим. Есть 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, может к этому сделать привязку? |
Цитата:
Да, с этим и свяжите: selectedIndex c номером div в коллекции. |
Цитата:
А немного не подскажите, как сделать эту связку? :-? Хотя бы на пальцах, а дальше я думаю подвести под свое смогу. |
<style>
div {background: green; color: yellow; cursor: pointer}
</style>
<select id="sel">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div id="myDiv">
<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;
div[0].style.display = 'block';
for (var i = 1; i < dl; i++) {
div[i].style.display = 'none'
}
var curIndex = 0;
sel.onchange = function () {
var index = sel.selectedIndex;
div[index].style.display = 'block';
div[curIndex].style.display = 'none';
curIndex = index;
}
})();
</script>
|
Подредактировал первый пример (в IE и хроме должен работать).
|
| Часовой пояс GMT +3, время: 02:31. |