Активная ссылка

100kd · November 17, 2007

По негласным законам веб-дизайна, активная ссылка должна как минимум выделяться. Вопрос: как дезактивировать ссылку (т.е превратить в обычный текст), по адресу которой мы и находимся. Например если пользователь на главной странице, то ссылка "На главную" или не присутствует или не активна.

Как я понимаю понимаю, только HTML и CSS тут не обойтись.

yopopt · November 17, 2007

К примеру на php можно сделать так:

<?php
echo ($_SERVER['PHP_SELF'] == 'index.php' ? "Главная" : "<a href="index.php" title="На главную">Главная</a>");
?>

D.S.Denton · November 17, 2007

логика простейшего варианта на пхп - повторять для каждой ссылки:

if (текущий_адрес == индекс.хтмл) {echo('Главная');}

else {echo('Главная');}

для сайтов с организацией движка типа index.php?id=...

проще использовать функцию eval()

ну и плюс промежуточные варианты, а также их комбинация. Тим Тоуди, в общем, как записано в Кэмеле:+)

100kd · November 17, 2007

Спасибо, но хотелось бы на JavaScript . На PHP мог бы реализовать - но думаю это не гибко. Хотелось бы чтобы такая работа проводилась в клиентской части.

Хм, нужно все-таки учить JavaScript...

D.S.Denton · November 18, 2007

на серверном языке это имхо более гибко. т.к. не у всех включен js, да и элементарно увеличивается вес, а смысла в этом мало.

однажды писал примерно такой вариант:

<?php if (!isset($_GET['page'])) {header('Location: ?page=main'); ?>
<head>
<script>
function MenuDis() {document.getElementById('link_<?php echo($_GET['page']); ?>').style.display = 'none';}
</script>
</head>
<body onload="MenuDis();">
<div id="nav">
<a id="link_main" href="?page=main">Главная</a>
<a id="link_news" href="?page=news">Новости</a>
<a id="link_cont" href="?page=cont">Контакты</a>
</div>
</body>

Yarik Voronov · November 18, 2007

Спасибо, но хотелось бы на JavaScript . На PHP мог бы реализовать - но думаю это не гибко. Хотелось бы чтобы такая работа проводилась в клиентской части.

Когда-то видел вот такой вариант реализации (или очень похожий). Достаточно быстрый по сравнению с перебором всех ссылок.

<!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>Active menu item</title>
<style type="text/css">
A {
 background-color:blue;
 padding:10px;
 border:2px solid #000000;
 margin:5px;
 color:white;
}
BODY {
 margin:5%;
}
DIV.news A.news {
 background-color:red;
} /*<![CDATA[вносим ручками
 или серверным скриптом, можно все варинты сразу описать в отдельном файле CSS]]>*/

DIV.main A.main, DIV.cont A.cont {
 background-color:red;
} /*<![CDATA[тестовый пример для проверки работы JS]]>*/
</style>
</head>
<body>
<div id="nav" class="news">
 <!--<![CDATA[класс div'а присваиваем ручками или серверным скриптом или java-script]]>-->
 <a class="main" href="?page=main&t=1">Главная</a>
 <a class="news" href="?t=1&page=news&g=1">Новости</a>
 <a class="cont" href="?page=cont">Контакты</a>
</div>

<!--<![CDATA[Например реализация Java Script]]>-->
<script type="text/javascript" language="javascript">
window.onload = function() {
 var dcName= document.location.href,
 b= dcName.search("page="),
 e= dcName.indexOf("&", b);
 if (e==-1) e= dcName.length
 dcName= dcName.substring(b+5,e); //где 5 длина строки поиска
 if (b==-1) dcName= 'main';
 document.getElementById('nav').className=dcName;
}
</script>
</body>
</html>

100kd · November 18, 2007

Благодарю всех. Что же, буду разбираться

Sign In

Активная ссылка

Question

100kd

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

D.S.Denton

Link to comment

Share on other sites

100kd

Link to comment

Share on other sites

D.S.Denton

Link to comment

Share on other sites

Yarik Voronov

Link to comment

Share on other sites

100kd

Link to comment

Share on other sites

Обсуждения

Forums

Important Information