Смена стиля "вышестоящего" элемента
Кастомизирую меню, в компоненту его создающую лезть не хотелось бы, помогите пожалуйста на 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> |
Цитата:
<!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>
|
Огромное спасибо!!!
|
Вариант на 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>
|
рони, спасибо! Но почему-то класс не меняется, а добавляется (т.е. становится не "parent_current" а "parent parent_current". Как победить?
|
anycall,
$(function() {
$(":button").click(function() {$("div.child_current").prevAll('.parent:first').removeClass().addClass('parent_current'); })
});
|
рони,
нижайший поклон! Спасибо! |
| Часовой пояс GMT +3, время: 08:31. |