Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   смена div при нажатии на ссылку (https://javascript.ru/forum/dom-window/5535-smena-div-pri-nazhatii-na-ssylku.html)

bars 21.10.2009 16:55

смена div при нажатии на ссылку
 


вот что надо... при щелчке на первую афишу, картинка в левом верхнем углу - меняется на поп, на середину - на рок, на третью, - попса...

вот как выглядет это в хтмл

<!-- 
					**********************************
						Классы для смены картинок
					
						rnb-entry
						pop-entry
						dj-entry
						hiphop-entry
						rnr-entry
						
					**********************************
					-->

					<div class="entry rnr-entry">
					
						<div class="bg-t"><div class="l"></div><div class="r"></div></div>
						<div class="m"><div class="m_i"><div class="m_i"><div class="m_i">
						
							<div class="entry-content">
							
								<div class="afisha-gallery">
								
									<ul class="clearfix">
										<li><div><a href="#"><img src="assets/i/temp/af.jpg" alt="" /></a></div><i></i></li>
										<li class="active"><div><a href="#"><img src="assets/i/temp/af.b.jpg" alt="" /></a></div><i></i></li>
										<li><div><a href="#"><img src="assets/i/temp/af.jpg" alt="" /></a></div><i></i></li>
									</ul>
								
									<div class="buttons">
										<a href="#" class="prev-all"></a>
										<a href="#" class="prev"></a>
										<a href="#" class="next-all"></a>
										<a href="#" class="next"></a>
									</div>
								
								</div>
							
								<div class="afisha-list">
									<div class="clearfix">
										<div class="list-item">
											<div class="item-ttl">АФИША «NR»</div>
											<div class="item-body clearfix">
												<ul>
													<li>
														<a href="#">
															<span class="date"><strong>2</strong> апреля</span>
															<span>Четвег. Твоя ночь в Moulin Rouge</span>
															<span>22:00 [жен. 500 р. / муж. 500 р.]</span>
														</a>
													</li>
													<li>
														<a href="#">
															<span class="date"><strong>2</strong> апреля</span>
															<span>Четвег. Твоя ночь в Moulin Rouge</span>
															<span>22:00 [жен. 500 р. / муж. 500 р.]</span>
														</a>
													</li>
													<li>
														<a href="#">
															<span class="date"><strong>11</strong> апреля</span>
															<span>Четвег. Твоя ночь в Moulin Rouge</span>
															<span>22:00 [жен. 500 р. / муж. 500 р.]</span>
														</a>
													</li>
												</ul>
												<ul>
													<li>
														<a href="#">
															<span class="date"><strong>2</strong> апреля</span>
															<span>Четвег. Твоя ночь в Moulin Rouge</span>
															<span>22:00 [жен. 500 р. / муж. 500 р.]</span>
														</a>
													</li>
													<li>
														<a href="#">
															<span class="date"><strong>22</strong> апреля</span>
															<span>Четвег. Твоя ночь в Moulin Rouge</span>
															<span>22:00 [жен. 500 р. / муж. 500 р.]</span>
														</a>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							
							</div>
						</div></div></div></div>
						<div class="bg-b"><div class="l"></div><div class="r"></div></div>
						<div class="v"></div>
					</div>
					<!-- /entry -->


вопрос как вообще это можно организовать....
просто сам не шарю вообще

Gozar 21.10.2009 17:28

по событию onclick, менять background-image или className или что там вообще.
document.getElementById('kartinka').style.backgrounImage = 'url(img/pop.jpg)'


как-то так.

bars 22.10.2009 06:16

http://neborecords.ru/index.html


там код вида

<script type="text/javasctipt">
					function setClass(classname)
					{
						document.getElementById('div').setAttribute('class', 'entry ' + classname);
					}
					</script>



на картинках так


<li><div><a href="#" onclick="setClass('rnr-entry'); return false;"><img src="assets/i/temp/af.jpg" alt="" /></a></div><i></i></li>
										<li class="active"><div><a href="#" onclick="setClass('pop-entry'); return false;"><img src="assets/i/temp/af.b.jpg" alt="" /></a></div><i></i></li>
										<li><div><a href="#" onclick="setClass('dj-entry'); return false;"><img src="assets/i/temp/af.jpg" alt="" /></a></div><i></i></li>


и все равно 0 эффекта....
может где в коде ошибка?

Gozar 22.10.2009 10:20

У Вас не определен setClass, вынесите <script> в <head></head>

bars 22.10.2009 10:33

сделал.. но толку ноль... может нужно привязать как то именно к этому диву.... а то div class у меня много

Gozar 22.10.2009 12:43

Простите не посмотрел Ваш код.
А где у вас:
<div id="div">

?
если Вы делаете:
document.getElementById('div')
, то у Вас должен быть
<div id="div">

bars 23.10.2009 04:57

и это я тоже делал... не помогло.... =(((
может есть какой другой способ

Gozar 23.10.2009 09:57

Что Вы там делали?
Я захожу на страницу по ссылке тыкаю мышкой на обложку и мне выдает ошибку:

setClass is not defined


И Вообще:

function setClass(classname)
                    {
                        document.getElementById('div').className = 'entry ' + classname
                    }


а также я проверяю наличие:
id="div"
на странице и я его тоже не вижу, кстати называть id-шники по имени тэгов считаю дурным тоном.

Gozar 23.10.2009 10:09

А еще можно не весь класс менять а только:
document.getElementById('div').style.backgroundImage = 'url(i/backgrounds/rnr.jpg)'

bars 23.10.2009 10:35

function setClass(classname)
					{
						document.getElementById('mydiv').setAttribute('class', 'entry ' + classname);
					}


я же его определил.... или надо еще как то по другому?

<div [B]id[/B]="[B]mydiv[/B]" class="entry rnr-entry">


вот и айди

Цитата:

А еще можно не весь класс менять
нужно именно весь... в этом и суть....


Часовой пояс GMT +3, время: 17:18.