Форум

anycall · #1 (**permalink**) 05.04.2011, 10:48

Кастомизирую меню, в компоненту его создающую лезть не хотелось бы, помогите пожалуйста на JS изменить стиль первого элемента <div class="parent"> НАД элементом <div class="child_current">?
т.е. сейчас при активном пункте подменю исходник такой:

<div class="parent"><a href="#">1</a></div>
<div class="parent"><a href="#">2</a></div>
<div class="parent"><a href="#">3</a></div>
<div class="parent"><a href="#">4</a></div>

<div class="parent"><a href="#">5</a></div>
	<div class="child"><a href="#">5.1</a></div>
	<div class="child_current"><a href="#">5.2</a></div>
	<div class="child"><a href="#">5.3</a></div>

<div class="parent"><a href="#">6</a></div>
<div class="parent"><a href="#">7</a></div>

а хочется такой:

<div class="parent"><a href="#">1</a></div>
<div class="parent"><a href="#">2</a></div>
<div class="parent"><a href="#">3</a></div>
<div class="parent"><a href="#">4</a></div>

<div class="parent_current"><a href="#">5</a></div>
	<div class="child"><a href="#">5.1</a></div>
	<div class="child_current"><a href="#">5.2</a></div>
	<div class="child"><a href="#">5.3</a></div>

<div class="parent"><a href="#">6</a></div>
<div class="parent"><a href="#">7</a></div>

ksa · #2 (**permalink**) 05.04.2011, 11:26

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

изменить стиль первого элемента <div class="parent"> НАД элементом <div class="child_current">?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.parent {
}
.parent_current {
	border: 1px solid red;
}
.child_current {
	border: 1px solid green;
}
</style>
<script type="text/javascript">
function Go() {
	var o=document.getElementsByTagName('div')
	var i,oset
	for (i=0; i<o.length; i++) {
		if ((o[i].className=='parent')||(o[i].className=='parent_current')) {
			oset=o[i]
		}
		if (o[i].className=='child_current') {
			break
		}
	}
	if (oset) {
		oset.className='parent_current'
	}
}
</script>
</head>
<body>
<div class="parent"><a href="#">1</a></div>
<div class="parent"><a href="#">2</a></div>
<div class="parent"><a href="#">3</a></div>
<div class="parent"><a href="#">4</a></div>
<div class="parent"><a href="#">5</a></div>
<div class="child"><a href="#">5.1</a></div>
<div class="child_current"><a href="#">5.2</a></div>
<div class="child"><a href="#">5.3</a></div>
<div class="parent"><a href="#">6</a></div>
<div class="parent"><a href="#">7</a></div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>

anycall · #3 (**permalink**) 05.04.2011, 13:04

Огромное спасибо!!!

рони · #4 (**permalink**) 05.04.2011, 13:06

Вариант на jquery

<!DOCTYPE html >
<html>
<head>
  <title></title>
<style type="text/css">
.parent {
}
.parent_current {
	border: 1px solid red;
}
.child_current {
	border: 1px solid green;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
 $(function() {
 $(":button").click(function() {$("div.child_current").prevAll('.parent:first').toggleClass('parent_current'); })
});
</script>
</head>
<body>
<div class="parent"><a href="#">1</a></div>
<div class="parent"><a href="#">2</a></div>
<div class="parent"><a href="#">3</a></div>
<div class="parent"><a href="#">4</a></div>
<div class="parent"><a href="#">5</a></div>
<div class="child"><a href="#">5.1</a></div>
<div class="child_current"><a href="#">5.2</a></div>
<div class="child"><a href="#">5.3</a></div>
<div class="parent"><a href="#">6</a></div>
<div class="parent"><a href="#">7</a></div>
<input type='button' value='Go' onclick='Go()' />
</body>
</html>

anycall · #5 (**permalink**) 05.04.2011, 16:37

рони, спасибо! Но почему-то класс не меняется, а добавляется (т.е. становится не "parent_current" а "parent parent_current". Как победить?

рони · #6 (**permalink**) 05.04.2011, 18:00

anycall,

$(function() {
 $(":button").click(function() {$("div.child_current").prevAll('.parent:first').removeClass().addClass('parent_current'); })
});

anycall · #7 (**permalink**) 05.04.2011, 18:10

рони,
нижайший поклон! Спасибо!

Форум

Справочник

Discord чат

Курсы javascript