Hello!

There is an idea to make 1 html page, but with different content.

The point is to place all the content on the page at once, and when selecting menu items, it is easy to change the class of visibility in some elements and thus switch the displayed content on the page.

Actually a request: help with a script that changes the class of the selected menu item li itself to active and assigns classes to arbitrary house elements.

Found a script, but it does not work for such links, but in js it is not strong ...

I will use the menu like this:

window.addEventListener("load",function(){ var myLinks = document.querySelectorAll("#menu a"); for(var i=0; i<myLinks.length; i++) if(location.href==myLinks[i].href){ myLinks[i].parentNode.classList.add("active"); } }); 
 <div id="menu"> <ul> <li><a href="#1"><div class="miN"></div><span class="mt">{{LMN1}}</span><span class="mb">{{LMN2}}</span></a></li> <li><a href="#2"><div class="miS"></div><span class="mt">{{LMS1}}</span><span class="mb">{{LMS2}}</span></a></li> <li><a href="#3"><div class="miC"></div><span class="mt">{{LMC1}}</span><span class="mb">{{LMC2}}</span></a></li> <li><a href="#4"><div class="miM"></div><span class="mt">{{LMSc1}}</span><span class="mb">{{LMSc2}}</span></a></li> </ul> </div>

    2 answers 2

    I advise you to learn at least the basics of JS and JQuery at least. With the help of them you can do it simply using standard functions. For example, for the first link to do something like:

     $('li:first').focus(function(){тут опишы все что нужно спрятать или показать});

    The method is of course trivial, but as a beginner, I think it will go ...

      Good people helped! The question is closed. I share, can someone come in handy:

       var IDs = {"#a":["#nC"],"#b":["#sC"],"#c":["#cC"], "#d":["#scC"]} window.addEventListener("DOMContentLoaded", updPage); window.addEventListener("hashchange", updPage); // Обновление элементов меню и страницы function addCls(arr,add){ arr.forEach(function(id){ var blc = document.querySelector(id); blc && blc.classList[add]("active"); }); } function updPage() { var temp = []; [].forEach.call(document.querySelectorAll("#menu a"), function(link,i){ var id = link.hash; id = IDs[id] ? [id].concat(IDs[id]) : [id]; var yes = location.href == link.href || !location.hash && !i; var add = yes ? "add" : "remove"; link.parentNode.classList[add]("active"); yes ? (temp = id) : addCls(id, add); }); addCls(temp,"add"); } 
       .blc{display:none;} .blc.active{display:block;} 
       <div id="menu"> <ul> <li><a href="#a">item1</a></li> <li><a href="#b">item2</a></li> <li><a href="#c">item3</a></li> <li><a href="#d">item4</a></li> </ul> </div> <div id="content"> <div id="nC" class="blc">item1 - Этот контент в Div-е nC</div> <div id="sC" class="blc">item2 - Этот контент в Div-е sC</div> <div id="cC" class="blc">item3 - Этот контент в Div-е cC</div> <div id="scC" class="blc">item4 - Этот контент в Div-е scC</div> </div>