Форум

mooni · #1 (**permalink**) 06.10.2012, 04:01

Доброго времени всем.
Вопрос такого характера:
Есть несколько блоков. Один с кнопками-ссылками, второй, соответственно, с содержимым (что-то похожее на некий слайдер). Подскажите, как сделать, чтобы если, например, активна одна кнопка и отображается её содержимое, то к ней применялся бы стиль :hover.
Заранее спасибо.))

Your · #2 (**permalink**) 06.10.2012, 05:22

jquery -> .hover() меняйте background через css.

Путем добавления класса.

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.block{width:300px;height:300px;background:#000000;}
		.block_hover{background:#ff0000;}
	</style>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.block').hover(function() {
				$(this).addClass('block_hover');
			},function() {
				$(this).removeClass('block_hover');
			});
		});
	</script>
</head>
<body>
	<div class="block"></div>
</body>
</html>

Your · #3 (**permalink**) 06.10.2012, 05:40

Ой тьфу, млин, это к кнопке надо, или к ссылке, если к ссылке - то там проще простого, если к кнопке лучше воспользоваться hover.

Если везде хотите, чтобы работало в старых браузерах.

mooni · #4 (**permalink**) 06.10.2012, 21:27

#id1 {
   background: url('http://knigthvolk.my1.ru/SC/menu/novosti.png') no-repeat;
   width: 70px;
   height: 15px;
   border: 0;
   color: transparent;
   outline: none;
   position: absolute;
   left: 5px;
   top: 0px;
}
#id1:hover {
   background: url('http://knigthvolk.my1.ru/SC/menu/novosti_a.png') no-repeat;
}
.id1 {
   background: url('http://knigthvolk.my1.ru/SC/menu/novosti_a.png') no-repeat;
}

#id2 {
   background: url('http://knigthvolk.my1.ru/SC/menu/rozysk.png') no-repeat;
   width: 70px;
   height: 15px;
   border: 0;
   color: transparent;
   outline: none;
   position: absolute;
   left: 5px;
   top: 40px;
}
#id2:hover {
   background: url('http://knigthvolk.my1.ru/SC/menu/rozysk_a.png') no-repeat;
}
.id2 {
   background: url('http://knigthvolk.my1.ru/SC/menu/rozysk_a.png') no-repeat;
}

<script type="text/javascript">
function newsSwitch(ne, cl) {

        document.getElementById('n1').style.display = 'none';
        document.getElementById('n2').style.display = 'none';
        document.getElementById('n3').style.display = 'none';
        document.getElementById('n4').style.display = 'none';
        document.getElementById('n5').style.display = 'none';
        document.getElementById(ne).style.display = 'block';   



        document.getElementById('id1').className = '';
        document.getElementById('id2').className = '';
        document.getElementById('id3').className = '';
        document.getElementById('id4').className = '';
        document.getElementById('id5').className = '';
        document.getElementById(cl).className = cl; 


   }
</script>
<a href="javascript:newsSwitch('n1', 'id1');" id="id1"></a><br />
<a href="javascript:newsSwitch('n2', 'id2');" id="id2"></a><br />
<a href="javascript:newsSwitch('n3', 'id3');" id="id3"></a><br />
<a href="javascript:newsSwitch('n4', 'id4');" id="id4"></a><br />
<a href="javascript:newsSwitch('n5', 'id5');" id="id5"></a>
</div>

Собственно вот мой код. n1-n2 блоки, ну там, я думаю, понятно.
Класс у активного элемента появляется как надо, но фоновая картинка не меняется.

mooni · #5 (**permalink**) 06.10.2012, 21:51

Спасибо, ребята! Проблема решилась добавлением в классы !important.))))

RodgerFox · #6 (**permalink**) 11.10.2012, 00:04

А не подскажите, вот был преведен пример с ид для каждого элемента, а можно без него сделать?
т.е. если список в котором находятся ссылки, пускай будет выглядеть вот так:

<ul>
<li><a ... /></li>
....
<li><a ... /></li>
</ul>

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

Форум

Справочник

Discord чат

Курсы javascript