Помогите по JS

R

rasandrey

Участник
Регистрация
2 Апр 2009
Сообщения
214
Реакции
6
Помогите, плиз, с JS. Суть в следующем:
есть html вида
Код: 
<ul class="ad-thumb-list" id="thumbs2">
  <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/1.png" ></a></li>
  <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/2.png" ></a></li>
  <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/3.png" ></a></li>
  <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/4.png" ></a></li>
  <li><a><img onclick="this.style.border='1px solid #c6bfb1'" src="images/thumbs/5.png" ></a></li>
 </ul>

По событию onclick происходит выделение изображения рамкой.

Вопрос: как сделать, чтоб при клике на одно из изображение рамки у других изображений пропадали (если были нажаты раньше)? Реализация через присвоение каждому img своего id, не подходит. Можно ли как-то по клику на изображение: сначала убирать бордер со всех в диве с id="thumbs2", а потом обводить нажатое в рамку?
 
rasandrey написал(а):
Можно ли как-то по клику на изображение: сначала убирать бордер со всех в диве с id="thumbs2", а потом обводить нажатое в рамку?
Нажмите для раскрытия...
да, можно
HTML: 
<script type="text/javascript">
function set_borders(obj){
  var imgs = document.getElementById('thumbs2').getElementsByTagName('img');
  for(var i = 0; i < imgs.length; i++) {
    imgs[i].style.borderWidth = '0px';
  }
  obj.style.border='1px solid #c6bfb1';
}
</script>
<ul class="ad-thumb-list" id="thumbs2">
  <li><a><img onclick="set_borders(this);" src="images/thumbs/1.png" ></a></li>
  <li><a><img onclick="set_borders(this);" src="images/thumbs/2.png" ></a></li>
  <li><a><img onclick="set_borders(this);" src="images/thumbs/3.png" ></a></li>
  <li><a><img onclick="set_borders(this);" src="images/thumbs/4.png" ></a></li>
  <li><a><img onclick="set_borders(this);" src="images/thumbs/5.png" ></a></li>
 </ul>
 
если есть включеная библиотека PrototypeJS, то решение вот

Код: 
var path = "#thumbs2 li a img";
document.observe("dom:loaded", function(){
	$(path).each(function(){
		$(this).on("click", function(){
			$(path).each(function(){
				$(this).style.border = "0";
			});
			$(this).style.border = "1px solid #c6bfb1";
		});
	});
});

писал на быструю руку, если что пиши.
 
с jquery
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab</title>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#thumbs2 img').click(function(){
        $('#thumbs2 img').removeClass('border');
        $(this).addClass('border');
    });
});
</script>

<style type="text/css">
<!--
.ad-thumb-list .border {
    border:1px solid #c6bfb1;
}
-->
</style>
</head>

<body>

<ul class="ad-thumb-list" id="thumbs2">
    <li><a><img src="images/thumbs/1.png" /></a></li>
    <li><a><img src="images/thumbs/2.png" /></a></li>
    <li><a><img src="images/thumbs/3.png" /></a></li>
    <li><a><img src="images/thumbs/4.png" /></a></li>
    <li><a><img src="images/thumbs/5.png" /></a></li>
</ul>

</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху