Присвоить разные class элементу li, какаие есть способы?
Доброго времени суток.
Есть вот такое, примерное, дерево элементов <ul> <li class="bg_link">link</li> <li class="bg_link">link</li> <li class="bg_link">link</li> <li class="bg_link">link</li> <li class="bg_link">link</li> <li class="bg_link">link</li> <li class="bg_link">link</li> </ul> and style
li{float:left;}
есть js
$(document).ready(function(){
$(".bg_link").hover(function(){
$( this ).addClass("active");
},function(){
$( this ).removeClass("active");
});
});
Как видно из выше приведенного кода все ссылки расположены горизонтально. У меня вопрос следующий: Как можно присвоить элементам li тем которые ближе к левому части экрана расположены один class, а к тем элементам li которые расположены правее другой class? Буду благодарен любой помощи. |
aleksandr8i,
а который по середине тому какой класс? |
Цитата:
|
aleksandr8i,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul{
margin:0 auto;
width:350px;
}
li{
float:left;
width:50px;
list-style:none;
}
li:hover{
background:#00FF00;
}
li:nth-child(n +5):hover{
background:#FF3333;
}
</style>
</head>
<body> <ul>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
</ul>
</body>
</html>
|
Цитата:
Но буду так же благодарен, если кто-то здесь приведет пример :) |
Цитата:
|
aleksandr8i,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
ul{
margin:0 auto;
width:350px;
}
li{
float:left;
width:50px;
list-style:none;
}
.active{
background:#00FF00;
}
.super{
background:#FF3333;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var li = $(".bg_link"), middle= li.length/2;
li.hover(function(){
var i = li.index(this);
$( this ).addClass(i < middle? "active" : "super");
},function(){
$( this ).removeClass("active super");
});
});
</script>
</head>
<body> <ul>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
<li class="bg_link">link</li>
</ul>
</body>
</html>
|
рони, ты ли это? Непривычно как-то без a b c :)
К слову, len все же не совсем подходит. Лучше half, middle, center. |
danik.js,
ok -- лучше названия подсказывай чем матерится |
рони, спасибо еще раз, это как раз то что мне нужно было.
Но я упустил важный момент, при описании задачи в первом сообщении. Элементов li достаточно много поэтому они все не помещаются в одну линию горизонта и переходят во второй ряд, образуя 3 ряд и т.д Вот проблема которую наблюдаю: При наведении курсора на элементы li 1-го ряда присвоен class="active" у 2-го ряда элементов на половину class="active" и class="super" у 3-го ряда элементов class="super" |
| Часовой пояс GMT +3, время: 11:14. |