И снова ajax

Тема в разделе "Другие языки", создана пользователем Marzocchi66, 26 июл 2011.

Модераторы: Цукер
  1. Marzocchi66

    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", чтобы по клику на ссылку, он не сбрасывался(т.к. по клику страница обновляется).
    Помогите разобраться.С аяксом ещё не приходилось работать, там вроде ничо сложного, но на такой мелочи встал((
    Спасибо!
     
  2. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    например сохранять выбор в куки
    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>
    
     
  3. Marzocchi66

    Marzocchi66 Постоялец

    Регистр.:
    23 сен 2010
    Сообщения:
    54
    Симпатии:
    0
    Спасибо!Но что-то не сработало =\

    Попробовал вот так:
    PHP:
    function changeClass(){
                    var 
    document.getElementById('home');
                    if(
    a.className == 'home_active'){
                        
    a.className '';
                    }else{
                        
    a.className 'home_active';
                    }
                    
                    var 
    document.getElementById('mail');
                    if(
    b.className == 'mail_active'){
                        
    b.className '';
                    }else{
                        
    b.className 'mail_active';
                    }
                    var 
    document.getElementById('map');
                    if(
    c.className == 'map_active'){
                        
    c.className '';
                    }else{
                        
    c.className 'map_active';
                    }
                }
                function 
    geturl(){
                    var 
    location.href;
                    if (
    == 'http://www.домен.ru/') {
                        
    changeClass();
                    }
    }
    geturl() повесил на onload для body, но всё равно не хочет...
     
  4. polyetilen

    polyetilen Заблокирован

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    если проверять по ссылке из 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>
    
     
  5. Marzocchi66

    Marzocchi66 Постоялец

    Регистр.:
    23 сен 2010
    Сообщения:
    54
    Симпатии:
    0
    Не срабатывает(
    Мошь в стилях дело?

    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;width28px;height24px ;
    }
    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>