И снова ajax

M

Marzocchi66

Постоялец
Регистрация
23 Сен 2010
Сообщения
54
Реакции
0
Здравствуйте!
Не могу разобраться...
Есть список
<ul id="spisok">
<li><a href="#">home</a></li>
<li><a href="#">mail</a></li>
<li><a href="#">map</a></li>
</ul>

Вот как-то, видимо через ajax, надо применить к <li> class="active", чтобы по клику на ссылку, он не сбрасывался(т.к. по клику страница обновляется).
Помогите разобраться.С аяксом ещё не приходилось работать, там вроде ничо сложного, но на такой мелочи встал((
Спасибо!
 
например сохранять выбор в куки
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>links</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">

//сохранить в куки
function cookie_set(name, value, seconds){
    if (typeof(seconds) != 'undefined'){
        var date = new Date();
        date.setTime(date.getTime() + (seconds*1000));
        var expires = "; expires=" + date.toUTCString();
    }else{
        var expires = "";
    }
    document.cookie = name+"="+value+expires+"; path=/";
}

//получить из куки
function cookie_get(cookieName){
    var theCookie=""+document.cookie;
    var ind=theCookie.indexOf(cookieName);
    if (ind==-1 || cookieName=="") return false;
    var ind1=theCookie.indexOf(';',ind);
    if (ind1==-1) ind1=theCookie.length;
    return unescape(theCookie.substring(ind+cookieName.length+1,ind1));
}

//сохраняет выбранный вариант в куки и класс вставляет
function activate_link(id){
    //очищаем класс
    $("#spisok a").removeClass();
    //добавляем класс к сыылке
    $("#"+id).addClass('active');
    //сохраняем id кликнутой ссылки в куки на память
    cookie_set('link_id', id, 10000000);
}

var link_id = 'home';
$(document).ready(function(){
    //если есть в куки то берём id и активируем ссылку
    if(cookie_get('link_id')){
        link_id = cookie_get('link_id');
        activate_link(link_id);
    }
    //после клика активируем ссылку
    $("#spisok a").click(function(){ 
        activate_link($(this).attr("id"));
    });
});
</script>
<style type="text/css">
<!--
#spisok a.active{
    color:#F00;
    outline: none;

}
-->
</style>
</head>
<body>

<ul id="spisok">
<li><a href="link.html" id="home">home</a></li>
<li><a href="link.html" id="mail">mail</a></li>
<li><a href="link.html" id="map">map</a></li>
</ul>

</body>
</html>
 
Спасибо!Но что-то не сработало =\

Попробовал вот так:
PHP: 
function changeClass(){
				var a = document.getElementById('home');
				if(a.className == 'home_active'){
					a.className = '';
				}else{
					a.className = 'home_active';
				}
				
				var b = document.getElementById('mail');
				if(b.className == 'mail_active'){
					b.className = '';
				}else{
					b.className = 'mail_active';
				}
				var c = document.getElementById('map');
				if(c.className == 'map_active'){
					c.className = '';
				}else{
					c.className = 'map_active';
				}
			}
			function geturl(){
				var q = location.href;
				if (q == 'http://www.домен.ru/') {
					changeClass();
				}
}
geturl() повесил на onload для body, но всё равно не хочет...
 
если проверять по ссылке из location.href то такой вариант
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>menu</title>

<script type="text/javascript" src="vars.js"></script>

<script type="text/javascript">

function changeClass(){
    var home = location.href.match("http://www.домен.ru/home.html")
    if(home)document.getElementById('home').className = 'active';
    
    var mail = location.href.match("http://www.домен.ru/mail.html")
    if(mail)document.getElementById('mail').className = 'active';
    
    var map = location.href.match("http://www.домен.ru/map.html")
    if(map)document.getElementById('map').className = 'active';

}
window.onload = changeClass; 
</script>

<style type="text/css">
<!--
#spisok a.active{
    color:#F00;
    outline: none;
}
-->
</style>


</head>

<body>
    
<ul id="spisok">
<li><a href="home.html" id="home">home</a></li>
<li><a href="mail.html" id="mail">mail</a></li>
<li><a href="map.html" id="map">map</a></li>
</ul>

</body>
</html>
 
Не срабатывает(
Мошь в стилях дело?

CSS:
PHP: 
li#home {background:url("/images/espo/home.png") no-repeat scroll 0 0 transparent;border-right: 1px dashed #cccccc;float: left;width: 28px;height: 24px;}
li#home:hover {background:url("/images/espo/home_active.png") no-repeat scroll 0 0 transparent;border-right: 1px dashed #cccccc;float: left;width: 28px;height: 24px;}
li.home_active {
	background:url("/images/espo/home_active.png") no-repeat scroll 0 0 transparent!important;width: 28px;height: 24px ;
}

JS:
PHP: 
function changeClass(){
			    var home = location.href.match("http://www.домен.ru/")
			    if(home)document.getElementById('home').className = 'home_active';
			    var mail = location.href.match("http://www.домен.ru/mail/")
			    if(mail)document.getElementById('mail').className = 'mail_active';
			    var map = location.href.match("http://www.домен.ru/sitemap/")
			    if(map)document.getElementById('map').className = 'map_active';
			}
			window.onload = changeClass;

HTML:
PHP: 
<ul>
<li><a id="home" title="Главная" href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a id="mail" title="Почта" href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
<li><a id="map" title="Карта сайта" href="/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
</ul>
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху