|
Сообщение от Malleys
|
|
Лучше напишите ❉, оно хотя бы не вводит в заблуждение!
|
хорошо, больше не буду вводить в заблуждение, и специально для этого немного переделала html-код
<!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 #999; padding: 5px; margin: 5px; }
a:active, a:link { color: #005aff; text-decoration: none; }
a.:visited { color: #5995ff; text-decoration: none; }
a:hover { color: #7a00ff; text-decoration: none; }
.efg { color: #167016; }
.def { color: #127a12; }
.cde { color: #0d850d; }
.bcd { color: #068f06; }
.abc { color: #009900; }
</style>
<script>
var classes = ['abc', 'bcd', 'cde', 'def', 'efg'];
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="/razdel/razdel.html">razdel</a><br>
<a href="/razdel/index.html">razdel_index</a><br>
<a href="/razdel/">razdel/</a><br>
<a href="/razdel/01.html">page-01</a><br>
<a href="/razdel/02.html">page-02</a><br>
<a href="/razdel/03.html">page-03</a>
<div class="menu" id="menu2">
<a href="/razdel/podrazdel/podrazdel.html">podrazdel</a><br>
<a href="/razdel/podrazdel/index.html">podrazdel_index</a><br>
<a href="/razdel/podrazdel/">podrazdel/</a><br>
<a href="/razdel/podrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/03.html">page-03</a>
<div class="menu" id="menu3">
<a href="/razdel/podrazdel/podpodrazdel/podpodrazdel.html">podpodrazdel</a><br>
<a href="/razdel/podrazdel/podpodrazdel/index.html">podpodrazdel_index</a><br>
<a href="/razdel/podrazdel/podpodrazdel/">podpodrazdel/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/03.html">page-03</a>
<div class="menu" id="menu4">
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/podrazdel-a.html">podrazdel-a</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/index.html">podrazdel-a_index</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/">podrazdel-a/</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/01.html">page-01</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/02.html">page-02</a><br>
<a href="/razdel/podrazdel/podpodrazdel/podrazdel-a/03.html">page-03</a>
</div>
</div>
</div>
</div>
</body>
</html>
ссылка на текущую страницу заменена на спан и подсвечивается, сейчас надо подсветить первые три ссылки в каждом див'е, присвоив им соответствующие классы которые указаны в массиве от большей вложенности к меньшей.