https://jsfiddle.net/k3xz05sf/1/
<style>
body { font: 14px normal Times, serif; }
div { border: 1px solid #ccc; padding: 5px; margin: 5px; }
a { text-decoration: none; color: #3c3vff; }
.xyz1 { color: #0F0; }
.xyz2 { color: #FF0; }
.xyz3 { color: #F00; }
</style>
<div class="menu" id="menu1">
<a href="/html.html">HTML</a>
<a href="/css.html">CSS</a>
<a href="/js.html">JS</a>
</div>
<div class="menu" id="menu2">
<a href="/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>
<script>
(()=>{
//const uriWithoutParams=location.pathname.split(/[#|?]+/i).shift();
const uriWithoutParams='/menu/css/css3/transform.html'.split(/[#|?]+/i).shift();
const extension=uriWithoutParams.split('.').pop();
let uriParts=uriWithoutParams.replace('.'+extension,'').split('/').filter(part=>part.length);
const getClassName=index=>'xyz'+index;
const maxPostfix=3;
uriParts.forEach((uri,index)=>{
uri=`/${uriParts.slice(0,++index).join('/')}.${extension}`;
index=maxPostfix-(uriParts.length-index);
if(index<=0)
return;
const className=getClassName(index);
document.querySelectorAll(`a[href="${uri}"]`).forEach(node=>{
node.classList.add(className);
if(index!==maxPostfix)
return;
node.textContent='someText';
});
});
})();
</script>
|