Форум PHP программистов > Ирбис

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Ирбис - AJAX

Гость_Марина

29.11.2011 - 23:54

Всем добрый вечер. Переделываю свой сайт после курсов Попова, если бы не узнала про irbis-team.com так бы и думала что все хорошо :)

Хочу попробовать сделать загрузку данных на аяксе. Вроде все работает, хочу сделать подсветку меню когда нажимаю:

<ul class="menu_bottom_left_ul">
  <li><a href="#q1" onClick="Pusk('1')">Главная</a></li>
  <li><a href="#q2" onClick="Pusk('2')">Творчество</a></li>  
  <li><a href="#q3" onClick="Pusk('3')">Стихи</a></li>
</ul>

Сделала в стилях класс class="current" для подсветки. Теперь не могу понять как связать чтобы при нажатии менялись данные и подсвечивалось меню. Прочитала про className = "" но не могу понять :(

var req = Create();

function ge(id)
{
    return document.getElementById(id);
}

function Create()
{  
    if(navigator.appName == "Microsoft Internet Explorer")
    {  
        req = new ActiveXObject("Microsoft.XMLHTTP");  
    }
    else
    {  
        req = new XMLHttpRequest();  
    }  
return req;  
}  

function Request(query)
{
    req.open('post', 'ajax.php' , true );
    req.onreadystatechange = Refresh;
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    req.send(query);  
}

function Refresh()
{
    var a = req.readyState;  
  
    if( a == 4 )
    {
        var b = req.responseText;
        document.getElementById('ajax').innerHTML = b;
        
    }
    else
    {
        document.getElementById('ajax').innerHTML = 'Загрузка...';

    }
}

function Pusk(id)
{  
    var query;  
    
    query ='txt='+encodeURIComponent(id);    
    Request(query);
}

Спустя 41 минута, 32 секунды (29.11.2011 - 23:36) killer8080 написал(а):

Гость_Марина
например так

<ul class="menu_bottom_left_ul">
  <li><a href="#q1" onClick="Pusk('1', this)">Главная</a></li>
  <li><a href="#q2" onClick="Pusk('2', this)">Творчество</a></li>  
  <li><a href="#q3" onClick="Pusk('3', this)">Стихи</a></li>
</ul>
<script>
var req = Create();

function ge(id)
{
    return document.getElementById(id);
}

function Create()
{  
    if(navigator.appName == "Microsoft Internet Explorer")
    {  
        req = new ActiveXObject("Microsoft.XMLHTTP");  
    }
    else
    {  
        req = new XMLHttpRequest();  
    }  
return req;  
}  

function Request(query)
{
    req.open('post', 'ajax.php' , true );
    req.onreadystatechange = Refresh;
    req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
    req.send(query);  
}

function Refresh()
{
    var a = req.readyState;  
  
    if( a == 4 )
    {
        var b = req.responseText;
        document.getElementById('ajax').innerHTML = b;
        
    }
    else
    {
        document.getElementById('ajax').innerHTML = 'Загрузка...';

    }
}

function Pusk(id, o)
{  
    var li = o.parentNode.parentNode.getElementsByTagName('li');
    for(var i = 0; i < li.length; i++){
        li[i].className = li[i].className.replace('current', '');
    }
    o.parentNode.className += ' current';

    var query;  
    
    query ='txt='+encodeURIComponent(id);    
    Request(query);
}
</script>

Спустя 20 минут, 3 секунды (29.11.2011 - 23:56) Guest написал(а):

А можно переделать чтобы скрипт вставлял не в <li class="current"> а в <a href="" class="current"

Пробовала заменить li на а, не получилось

Спустя 5 минут, 56 секунд (30.11.2011 - 00:02) killer8080 написал(а):

можно

function Pusk(id, o)
{  
    var a = o.parentNode.parentNode.getElementsByTagName('a');
    for(var i = 0; i < a.length; i++){
        a[i].className = a[i].className.replace('current', '');
    }
    o.className += ' current';

    var query;  
    
    query ='txt='+encodeURIComponent(id);    
    Request(query);
}

Спустя 2 минуты, 56 секунд (30.11.2011 - 00:05) Guest написал(а):

Большое вам спасибо. Я бы сама не когда не сделала такое!

Спустя 7 минут, 53 секунды (30.11.2011 - 00:13) Guest написал(а):

А можно еще вопросик. А как сделать чтобы первая ссылка по умолчанию была подсвечена?

if (a[i] == 1) {

o.className += 'current';

}

Вот так можно?

Спустя 5 минут (30.11.2011 - 00:18) Guest написал(а):

У меня стояла <body onload="Pusk('1', this)">

И сразу грузился блок первый. А теперь с этим кодом не грузиться. Когда его убераю то грузиться

    var a = o.parentNode.parentNode.getElementsByTagName('a');
    for(var i = 0; i < a.length; i++){
        a[i].className = a[i].className.replace('current', '');
    }
    o.className += ' current';

это где-то конфликт?

Спустя 2 минуты, 34 секунды (30.11.2011 - 00:20) Guest написал(а):

Выше пост я решила, переставила местами код:

function Pusk(id, o)
{
    var query;  
    
    query ='txt='+encodeURIComponent(id);    
    Request(query);
    
    var a = o.parentNode.parentNode.getElementsByTagName('a');
    for(var i = 0; i < a.length; i++)
    {
        a[i].className = a[i].className.replace('current', '');
    }
    o.className += 'current';

}

Спустя 30 секунд (30.11.2011 - 00:21) killer8080 написал(а):

просто первому элементу прописать класс вручную через атрибут класс, а скриптом не трогать первый элемент.

function Pusk(id, o)
{  
    var a = o.parentNode.parentNode.getElementsByTagName('a');
    for(var i = 1; i < a.length; i++){
        a[i].className = a[i].className.replace('current', '');
    }
    if(o != a[0]) o.className += ' current';

    var query;  
    
    query ='txt='+encodeURIComponent(id);    
    Request(query);
}

Спустя 1 минута, 13 секунд (30.11.2011 - 00:22) killer8080 написал(а):

Цитата (Guest @ 29.11.2011 - 23:20)

Выше пост я решила, переставила местами код:

а смысл?

Спустя 3 минуты, 53 секунды (30.11.2011 - 00:26) Guest написал(а):

Смысл что когда только загружаешь страницу то грузить <li><a href="#q1" onClick="Pusk('1', this)">Главная</a></li>

главная страница.

А если вот так сделать

if(o != a[0]) o.className += ' current';

То при повторном нажатии на первую она уже не подсв.

Спустя 1 минута, 57 секунд (30.11.2011 - 00:28) Guest написал(а):

Вот так заработало:

    if(o != a[0])
      o.className += 'current';
        else
      o.className += 'current';

Спасибки!

Спустя 4 минуты, 3 секунды (30.11.2011 - 00:32) killer8080 написал(а):

А ты внимательней посмотри мой код, там цикл начинался не с 0, а с 1-цы

Цитата (Guest @ 29.11.2011 - 23:28)

if(o != a[0])
o.className += 'current';
else
o.className += 'current';

а тут вообще отсутствие логики, при любом раскладе выполняется одно и то же действие

Спустя 4 минуты, 59 секунд (30.11.2011 - 00:37) Guest написал(а):

Ой, точно. Извините меня. Спасибо вам за помощь!

Быстрый ответ:

Здесь расположена полная версия этой страницы.