Форум

chinga · #1 (**permalink**) 15.05.2012, 22:15

Всем доброго времени суток.
В программировании я не силен и поэтому решился задать вопрос знающим.
Есть 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);">

Все это хорошо, но не могу дотумкать, как сделать так, чтобы при загрузке страницы первый див уже был "выделенным", а при нажатии на другие соответственно становился "не выделенным".

Заранее спасибо за ответы.

bot87 · #2 (**permalink**) 16.05.2012, 00:59

У меня вЫшло так

<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>

Кто знает как проще сделать эту задачу???

chinga · #3 (**permalink**) 16.05.2012, 01:22

пасиб, работает
только вот IE просит разрешения на исполнение ActiveX

попробуем подождать еще вариантов

bes · #4 (**permalink**) 16.05.2012, 08:03

Сообщение от chinga

только вот 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>

bes · #5 (**permalink**) 16.05.2012, 08:26

Без скриптов можно сделать такое.

<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>

bot87 · #6 (**permalink**) 16.05.2012, 09:04

bes подправь скрипт,не работает

bes · #7 (**permalink**) 16.05.2012, 10:27

В хроме работает, в IE нет (в этих двух браузерах дело не в myDiv вместо document.getElementById('myDiv') ).
IE почему-то не получает target в функции click(), почему не могу понять.

melky · #8 (**permalink**) 16.05.2012, 10:39

bes,

function click(e){
  if(!e) e = event;
  var target = e.target || e.srcElement
.....

bes · #9 (**permalink**) 16.05.2012, 11:13

melky, IE8 это не помогает

chinga · #10 (**permalink**) 16.05.2012, 11:31

ActiveX (да и вообще замечания от браузера) многие не продвинутые пользователи пугаются

вообще у меня идет связка дивов с select option (я их прячу и вывожу данные дивами). у одного option имеется selected, может к этому сделать привязку?

Форум

Справочник

Discord чат

Курсы javascript