как с помощью css можно определить что ссылка имеет отношение к текущему пути? это если не ошибаюсь объект "location", вот скрипт
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<title>transform</title>
<style type="text/css">
body { font: 14px normal Times, serif; }
div { border: 1px solid #ccc; padding: 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #009900; }
.xyz2 { color: #11b311; }
.xyz3, .xyz4, .xyz5, .xyz6 .xyz7 { color: #28cc28; }
span.xyz3, span.xyz4, span.xyz5, span.xyz6 span.xyz7 { color: #28cc28; }
</style>
<script>
var classes = ['xyz4', 'xyz3', 'xyz2', 'xyz1'];
document.addEventListener('DOMContentLoaded', function() {
var uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
var extension = uriWithoutParams.split('.').pop();
var uriParts = uriWithoutParams.replace('.' + extension, '').split('/').filter(function(part) {
return part.length;
});
var reversedClasses = classes.reverse();
var getClassName = function(index) {
return reversedClasses[index-1];
};
var maxPostfix = classes.length;
uriParts.forEach(function(uri, index) {
uri = '/' + uriParts.slice(0, ++index).join('/') + '.' + extension;
index = maxPostfix - (uriParts.length - index);
if (index <= 0)
return;
var className = getClassName(index);
[].forEach.call(document.querySelectorAll('a[href="' + uri + '"]'), function(node) {
node.classList.add(className);
if (index !== maxPostfix)
return;
var textNode = document.createElement('span');
textNode.textContent = node.textContent;
textNode.className = className;
node.parentNode.insertBefore(textNode, node);
node.parentNode.removeChild(node);
});
});
});
</script>
</head>
<body>
<div class="menu" id="menu1">
<a href="/menu/html.html">HTML</a>
<a href="/menu/css.html">CSS</a>
<a href="/menu.html">menu</a>
<a href="/js.html">JS</a>
</div>
<div class="menu" id="menu2">
<a href="/menu/css/css3.html">CSS3</a><br/>
<div>
<a href="/menu/css/css3/transform.html">transform</a><br/>
<a href="/menu/css/css3/transform-origin.html">transform-origin</a><br/>
<a href="/menu/css/css3/transform-style.html">transform-style</a><br/>
</div>
</div>
</body>
</html>
все работает если указывать ссылку на одноимённую с папкой страницу как в примере выше, но если указать ссылку на главную (index.html) в папке то не работает, правда я не проверяла что будет если указать абсолютный путь (с
http://)