VPF::Подсветка сслыки на открытую страницу

BobiKK

Дата 17.7.2006, 15:31 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 655
Регистрация: 1.12.2005
Где: Essen, Deutschlan d

Репутация: нет
Всего: 16

Суть проблемы.
Имеется горизонтальное меню и вертикальное меню. Пользователь выбирает сначала категорию в горизонтальном меню, потом в вертикальном. Подсвечивается, соответственно, 2 ссылки, которые соответствуют странице, на которой находится пользователь. Как это реализовать?
Ничего другого, кроме как пропарсить ссылку, пройтись по всем ссылкам на странице и подменить класс на ум не приходит

12345c

Дата 17.7.2006, 16:40 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

На этапе создания страницы генерируете меню, проверяя ссылку на совпадение с location.href или её частями.

BobiKK

Дата 18.7.2006, 08:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 655
Регистрация: 1.12.2005
Где: Essen, Deutschlan d

Репутация: нет
Всего: 16

А можно по-подробнее?
Ссылки у меня формируются скриптом, причем только значение href, а сам внешнйи вид прописан статически в шаблоне

dstorm81

Дата 18.7.2006, 10:08 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

вот это для ссылок по горизонтали (по вертикали пидется немного подумать)

К примеру есть шапка в которой ссылки на различные части сайта.

Код

<div id="header">
<a href="index.html">1st</a>
<a href="scripts.html">скрипты</a>
<a href="army.html">army</a>
<a href="links.html">линки</a>
<a href="questbook.php">guest</a>
</div>

для того чтобы выделялась ссылка того раздела где мы находимся делаем так.

Код


var howMatchAn=document.getElementById('header').getElementsByTagName('A');
// находим все А в шапке
var isRooter='';
// которая будет ставить цвет при таком варианте [URL=http://localhost]http://localhost[/URL]   - здесь явно не определена страница
for(ai=0;ai<howMatchAn.length;ai++)// цикл
    {
    if(location.href.indexOf(howMatchAn[ai].getAttribute('href'))!=-1) 
// если фактическое месторасположение страницы содержит урл указанный в ссылке
// к примеру если мы на  [URL=http://localhost/links.html]http://localhost/links.html[/URL] то сработает на ссылку <a href="links.html">линки</a>
        {
        howMatchAn[ai].className='linkerHere'; // присваиваем ссылке другой класс
        }
    else{isRooter++} // вариант когда [URL=http://localhost]http://localhost[/URL]  накручиваем ссылку
    }
if(isRooter==howMatchAn.length){howMatchAn[0].className='linkerHere';}
// если счетчик = длине всех ссылок (перебор ничего не дал) то,
// выделяем ссылку первую самую, у нас <a href="index.html">1st</a>

собственно стили для А

Код


#header a:link, #header a:visited{text-decoration:none;color:black;background-color:white; padding:0px;display:block;border-style:solid;border-width:1px; margin:1px;border-color:black;width:100%;}
#header a:hover{color:black;background-color:lightblue;width:100%;}
#header a.linkerHere:link, #header a.linkerHere:visited, #header a.linkerHere:hover{text-decoration:none; color:white;background-color:royalblue;padding:0px;display:block; border-style:solid;border-width:1px;margin:1px;border-color:black;width:100%;}

Это сообщение отредактировал(а) Sardar - 20.7.2006, 15:21

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

BobiKK

Дата 18.7.2006, 13:01 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 655
Регистрация: 1.12.2005
Где: Essen, Deutschlan d

Репутация: нет
Всего: 16

Спасибо большое, буду пробовать.
Только вот вопросик встречный. Условие if(location.href.indexOf(howMatchAn[ai].getAttribute('href'))!=-1) как будет реагировать, если значение href у меня не "http://localhost/index.php...", а "index.php?var=..."?

dstorm81

Дата 19.7.2006, 20:43 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

так-с
во первых: скажи мне какое у тебя будет меню, выпадающее? или како нить другое (дай пример)
во вторых: какие ссылки у тебя, разные или все идут через index.phh? типа как здесь на форуме.

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

BobiKK

Дата 20.7.2006, 15:16 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 655
Регистрация: 1.12.2005
Где: Essen, Deutschlan d

Репутация: нет
Всего: 16

Меню не выпадающие, обыкновенные.
Ссылки вверху:
index.php?id_cat=1
index.php?id_cat=2
index.php?id_cat=3 и т.д.

Ссылки в вертикальном меню:
index.php?id_cat=1&id_menu=1
index.php?id_cat=1&id_menu=2
index.php?id_cat=1&id_menu=3 и т.д.

В другом вертикальном меню (выдбрать другую категорию в горизонатльном меню), ссылки соответственно такие:
index.php?id_cat=2&id_menu=1
index.php?id_cat=2&id_menu=2
index.php?id_cat=2&id_menu=3

P.S. Сорри за ламеро-нубовские вопросы, руки все никак не доходят до какого-нибудь учебника по JS

dstorm81

Дата 20.7.2006, 21:23 (ссылка)

(нет голосов)

Загрузка ...

бездельник

Профиль
Группа: Завсегдатай
Сообщений: 1178
Регистрация: 18.1.2006
Где: (16RU)

Репутация: 20
Всего: 39

Код


<html>
<head>
<style>
#header1{position:absolute;top:30;left:20px}
#header2{position:absolute;top:30;left:150px}
#header3{position:absolute;top:30;left:280px}
#header1 a:link, #header1 a:visited{text-decoration:none;color:black;background-color:white; padding:0px;display:block;border-style:solid;border-width:1px; margin:1px;border-color:black;width:100px;}
#header2 a:link, #header2 a:visited{text-decoration:none;color:black;background-color:white; padding:0px;display:block;border-style:solid;border-width:1px; margin:1px;border-color:black;width:100px;}
#header3 a:link, #header3 a:visited{text-decoration:none;color:black;background-color:white; padding:0px;display:block;border-style:solid;border-width:1px; margin:1px;border-color:black;width:100px;}
#header a:link, #header a:visited{text-decoration:none;color:black;background-color:white; padding:0px;border-style:solid;border-width:1px; padding:0px 20px 0px 20px;margin:20px;border-color:black;width:100px;}
#header a:hover,#header1 a:hover,#header2 a:hover,#header3 a:hover{color:black;background-color:lightblue;width:100%;}
#header a.linkerHere:link, #header a.linkerHere:visited, #header a.linkerHere:hover{text-decoration:none; color:white;background-color:royalblue;padding:0px;padding:0px 20px 0px 20px;margin:20px; border-style:solid;border-width:1px;border-color:black;width:100px;}
#header1 a.linkerHere:link, #header1 a.linkerHere:visited, #header1 a.linkerHere:hover{background-color:royalblue;}
#header2 a.linkerHere:link, #header2 a.linkerHere:visited, #header2 a.linkerHere:hover{background-color:royalblue;}
#header3 a.linkerHere:link, #header3 a.linkerHere:visited, #header3 a.linkerHere:hover{background-color:royalblue;}
</style>
</head>
<body>
<span id="header">
<a href="index.html?id_cat=1">первая</a>
<a href="index.html?id_cat=2">вторая</a>
<a href="index.html?id_cat=3">третья</a>
</span>
<div id="header1">
<a href="index.html?id_cat=1&id_menu=1">первая</a>
<a href="index.html?id_cat=1&id_menu=2">вторая</a>
<a href="index.html?id_cat=1&id_menu=3">третья</a>
</div>
<div id="header2">
<a href="index.html?id_cat=2&id_menu=1">первая</a>
<a href="index.html?id_cat=2&id_menu=2">вторая</a>
<a href="index.html?id_cat=2&id_menu=3" >третья</a>
</div>
<div id="header3">
<a href="index.html?id_cat=3&id_menu=1">первая</a>
<a href="index.html?id_cat=3&id_menu=2">вторая</a>
<a href="index.html?id_cat=3&id_menu=3">третья</a>
</div>
<script>
var dbl=false;
sel_a=function(theID)
{
//alert(theID)
var howMatchAn=document.getElementById(theID).getElementsByTagName('A');
var isRooter=1;
for(ai=0;ai<howMatchAn.length;ai++)// цикл
    {
    if(location.href.indexOf(howMatchAn[ai].getAttribute('href'))!=-1){howMatchAn[ai].className='linkerHere';break;}
    else{isRooter++} 
    }
if(isRooter>howMatchAn.length && !dbl){howMatchAn[0].className='linkerHere';}
if(!dbl&&isRooter<=howMatchAn.length){dbl=true;eval('sel_a("header'+isRooter+'")')}
}
sel_a("header");
</script>
</body>
</html>

замени html на php, у меня сервака нет под рукой, и смотри в опере или в лисе, что-то я с со стилями напортачил, в общем сам разберешься, надеюсь smile

--------------------

на форуме с 8.12.2002 (http://forum.vingrad.ru/index.php?act=ST&f=10&t=4874&st=0#)

BobiKK

Дата 20.7.2006, 21:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 655
Регистрация: 1.12.2005
Где: Essen, Deutschlan d

Репутация: нет
Всего: 16

Спасибо наиогромнейшее! Буду проверять smile

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »