Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Нажатая ссылка имеет другой стиль

Автор: TWoVKP 1.10.2009, 20:33

Вообщем суть такая, есть менюшка в которой естественно много ссылок, при наведение на ссылку меняется её стиль, становится другого цвета, появляется подёркивание и увеличивается шрифт на 1 пункт, вроде ничего необычного, ссылка при потере фокуса получает стандартный слтилью

Как сделать чтобы нажатая в меню ссылка приобретала другой стиль и этот стиль оставался именно у этой ссылки до тех пор пока не будет нажата другая ссылка в этом же меню, а остальные ссылки в это время имели стандартный стиль. При нажатии на другой пункт меню (то есть на ссылку), нажатая ссылка приобретала другой стиль, а предыдущая ссылка снова приобретала стандартный стиль???

Покажите примерчик!!! smile

Автор: bars80080 1.10.2009, 23:38

а при этом случаем не происходит ли перезагрузка страницы?

Автор: TWoVKP 2.10.2009, 00:03

При нажатии на пункт меню происходит загрузка соответствующей страницы, если страница была активной в данный момент времени то естественно происходит перезагрузка этой же самой страницы!

Автор: Grig 2.10.2009, 03:49

Если происходит перезагрузка страницы, то тебе надо передавать в ссылке параметр, по которому можно будет определить какая ссылка была нажата. Если же перегружается только содержимое страницы(фрейм, аякс) юзай глобальную яваскриптовую переменную.

Автор: TWoVKP 2.10.2009, 09:45

Grig

Ну вообще при нажатие на ссылку перезагружается вся страница!

А можно небольшой примерчик! smile

Плз

Автор: bars80080 2.10.2009, 09:51

Цитата(TWoVKP @ 2.10.2009, 09:45

)

Ну вообще при нажатие на ссылку перезагружается вся страница!

в этом случае выделение пункта меню традиционно решается на сервере

к примеру одна ссылка http:/ /server.ru/page1.html, вторая http:/ /server.ru/page2.html
если сайт статический, то на каждой странице мы помечаем нужный пункт меню соответствующим классом и рисуем для него нужные стили

если сайт динамический
к примеру одна ссылка http:/ /server.ru/index.php?page=1, вторая http:/ /server.ru/index.php?page=2
то на сервере пишется скрипт, который строит меню и в выбранном пункте вставляет соответствующий класс

Автор: TWoVKP 2.10.2009, 10:16

bars80080

Сайт у меня динамический, написан на PHP, это как во втором примере:

Код


к примеру одна ссылка http:/ /server.ru/index.php?page=1, вторая http:/ /server.ru/index.php?page=2
то на сервере пишется скрипт, который строит меню и в выбранном пункте вставляет соответствующий класс

Скрипт который строит меню тоже есть, вот:

Код


<?php 
    $sql = 'SELECT * FROM menu_left';
    $ergebnis = mysql_query($sql, $db);
    $spalten = mysql_num_rows($ergebnis);
    
    echo "<table class='left_menu_tabel' >";
    for($i = 0; $i < $spalten; $i++)
    {
        $pfad = mysql_fetch_array($ergebnis);
        echo "<tr>";
            /*Сначала выводим катринку для пунтка меню*/
            echo "<td>";
                echo "<a target='_self' title='$pfad[4]' class='link_menu_left_with_icon' href='$pfad[3]'>";
                    echo "<img src='$pfad[1]' width='18' height='18'/>";
                echo "</a>";
            echo "</td>";
            /*Теперь выводим сам пункт меню ввиде ссылки*/
            echo "<td class='left_menu' onMouseOver='over(this);' onMouseOut='out(this);'>";
                echo "<a target='_self' title='$pfad[4]' class='link_menu_left' href='$pfad[3]'>";
                    echo "$pfad[2]";
                echo "</a>";
            echo "</td>";
        echo "</tr>";
    }
    echo "</table>";
?>

Вот в этой строчке происходит присваивание класса - ссылке

Код


(class='link_menu_left')

, при получение мышкой фокуса меняется стиль ссылки --

Код


a:hover
{
    color: #FF0000;
    text-decoration: underline;
    font-weight: bold;
}

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

Код


(class='link_menu_left')

а нажата имела совсем другой вид????

Как такой реализовать, ну просто не доходит до меня!

Вот хотя бы небольшой примерчик:
http://forex-forum.my1.ru/gb/

Посмотрит меню, все ссылки имеют одинаковый стиль кроме той которая в данный момент выбрана!

Автор: Grig 2.10.2009, 12:01

я бы сделал так:

Код


<?php 
$my_i = $_GET['i'];
    $sql = 'SELECT * FROM menu_left';
    $ergebnis = mysql_query($sql, $db);
    $spalten = mysql_num_rows($ergebnis);
    
    echo "<table class='left_menu_tabel' >";
    for($i = 0; $i < $spalten; $i++)
    {
//указываем класс
$str_class = ($my_i==$i)?"link_menu_left":"link_menu_right";

        $pfad = mysql_fetch_array($ergebnis);
        echo "<tr>";
            /*Сначала выводим катринку для пунтка меню*/
            echo "<td>";
                echo "<a target='_self' title='$pfad[4]' class='link_menu_left_with_icon' href='$pfad[3]'>";
                    echo "<img src='$pfad[1]' width='18' height='18'/>";
                echo "</a>";
            echo "</td>";
            /*Теперь выводим сам пункт меню ввиде ссылки*/
            echo "<td class='left_menu' onMouseOver='over(this);' onMouseOut='out(this);'>";
                echo "<a target='_self' title='$pfad[4]' class='".$str_class."' href='$pfad[3]?i=".$i."'>";
                    echo "$pfad[2]";
                echo "</a>";
            echo "</td>";
        echo "</tr>";
    }
    echo "</table>";
?>

осталось только прописать классы link_menu_left и link_menu_right