ul li по клику становится активным?

JIucky · July 29, 2010

Здесь такая вот тема, что нужно как-то сделать так, чтобы li после нажатия на него изменял свой стиль скажем на li.active и сохранял его даже после клика, а возвращался в нормальное состояние только после клика по другому li из списка.

Сам код такой:

<style type="text/css">
.list ul li{
cursor:default;
line-height:0;
font-size:0;
margin:0 0 3px;
overflow:hidden;_zoom:1;
}
.list ul li:hover,.contactr .list ul li.hover{
background:#fff;
}
</style>

<div class="list">
  <ul>
	 <li>
		<p class="name">Bill Biilewitch</p>
		<p class="login">1234567890--=</p>
	 </li>
	 <li>
		<p class="name">Bill Biilewitch</p>
		<p class="login">1234567890--=</p>
	 </li>
  </ul>
</div>

Кто дружит с яваскриптом, помогите плз! :rolleyes:

Edited July 29, 2010 by JIucky

stars · July 30, 2010

Ну у вас hover меняет только цвет bg, значит вам нужно сделать функцию которая по клику на li меняет его bg. Но перед этим надо всем li выставлять начальный bg

Наверно как то так будет:

function color(node) { document.getElementByTagName('li').style.backgroundcolor = 'red'; node.style.backgroundcolor = 'green'; }

<li onclick="color(this);">

Edited July 30, 2010 by stars

psywalker · July 30, 2010

Действуй по известной системе: При нажатии циклом вырубай все классы, а после уже врубай нужный.

JIucky · July 31, 2010

Подсказали на квери сделать так:

$(document).ready(function(){
  $(".list ul li").toggle(function(){
	$(this).addClass('clicked');},
  function(){$(this).removeClass('clicked');});
});

Стили:

<style type="text/css">
.list ul li{
cursor:default;
line-height:0;
font-size:0;
margin:0 0 3px;
overflow:hidden;_zoom:1;
}
.list ul li:hover,.contactr .list ul li.hover,.list ul li.clicked{
background:#fff;
}
</style>

Вроде работает :rolleyes:

Edited July 31, 2010 by JIucky

psywalker · July 31, 2010

Да нафига из-за такой мелочи целую библиотеку подключать, легче это на JS чистом сделать, да и всё.

psywalker · July 31, 2010

Вот смотри сам, это же всего пару строчек кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
	#ul { list-style: none; margin: 0; padding: 0;}
	#ul li { border: 1px solid #000; margin: 3px 0;}
	#ul li.active { background: red;}
</style>
</head>

<body>
<ul id="ul">
	<li class="active">
		<a href="#">01 Первая категория</a>
	</li>
	<li>
		<a href="#">02 Первая категория 2</a>
	</li>
	<li>
		<a href="#">03 Первая категория 3</a>
	</li>
</ul>
<script type="text/javascript">
	var li = document.getElementById('ul').getElementsByTagName('li');
	for(var i=0;i<li.length;i++){
		li[i].onclick = function(){
			for(var j=0;j<li.length;j++) li[j].className = '';
			this.className = 'active';
		}
	}
</script>
</body>
</html>

JIucky · August 12, 2010

psywalker, спасибо! Действительно так проще, я просто вообще не шарю в скриптах...

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

Edited August 12, 2010 by JIucky

tree85 · June 5, 2012

Добрый день!

Подскажите в #ul li.active { background: red;} можно ли как-нибудь цвет шрифта задать?

alexandr_v-vich · June 5, 2012

tree85, вы решили это через js решать?

#ul li.active {color: grey;}

tree85 · June 6, 2012

tree85, вы решили это через js решать?
#ul li.active {color: grey;}

Дело в в том что я так пробовал, но у меня не выходит поменять цвет, т.е. сколько я не пробовал он берет цвет из #navigation li a{}

#navigation li a {
	color: #9e9e9e;
	font-family: PragmaticaCondCTT;
	font-size: 110%;
	text-transform: uppercase;
        text-decoration: none;
	padding: 5px 15px;
	display: block;
       [b] color: #e4e1e1;[/b]  
}

#navigation li a:hover {
	background-color: #ef9f0b;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef9f0b), to(#e67d19));
        background-image: -moz-linear-gradient(#ef9f0b, #e67d19);
        background-image: -o-linear-gradient(#ef9f0b, #e67d19);
        background-image: linear-gradient(#ef9f0b, #e67d19);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ef9f0b', EndColorStr='#e67d19');

}

#navigation li.active  {
	background-color: #ef9f0b;
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ef9f0b), to(#e67d19));
        background-image: -moz-linear-gradient(#ef9f0b, #e67d19);
        background-image: -o-linear-gradient(#ef9f0b, #e67d19);
        background-image: linear-gradient(#ef9f0b, #e67d19);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ef9f0b', EndColorStr='#e67d19');
	[b]color: #ffffff;[/b]

buddah · June 6, 2012

#ul li.active a {color: grey;}

Sign In

ul li по клику становится активным?

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information