On the main page (stom-mva ru), some menu items (links) lead to other pages, other items are changed to divs (the main “content”) with the help of this code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function() { $('.m').on('click', function(e) { e.preventDefault(); $('.content').each(function() { $(this).css('display', 'none'); }); var block = $(this).attr('href'); $(block).css('display', 'block'); }); }); </script>

and

 <li ><a href="#about" class="m" id="abo"> </a></li> <li ><a href="uslugi.html" id="usl"></a></li> <li ><a href="gallery.html" id="gall" ></a></li> <li ><a href="#contacts" class="m" id="cont" ></a></li>

...

 <div class="content" id="about">

...

Question: how to make it so that this menu would work correctly from other pages of the site? Those. so that on other pages, links that lead to "additional" divs on the main page work correctly, and automatically show the necessary blocks?

As I think, there can be 2 ways here: 1. correctly specify these “dynamic” blocks in the menu links. (but how? I know only what is used in CMS, but php! is there, and will they be CNC then?) 2. in the script, finish the "triggering" function when switching from "external" links. But how?

  • If I understand you correctly, relative paths (./somePage.html) are usually used. And what about the anchors (#contacts, #about), then you need to assign the appropriate id (contacts, about) to some elements to alexoander
  • id assigned, and it works if you call them with the main one. If we are on another page, then when you click "on them", only the main page is displayed, and the content on it does not change. - Oleg

1 answer 1

I clicked and found out that you just have a simple "mismatch" when running the script. How it turns out - when you move from "service" to "insurance", the link looks like index.html # insurance. The link is quite working, but the script that processes it works AFTER loading the page.

And even more - the script handles the CLICK (click) on an element, and when you go to a page, you don’t click on an element - you are loading the page. But when you download it, there is no processing (after all, when you open insurance you go back to the index.html page).

The solution is quite simple - you need to put the processing to load the page that will handle the url. If there is an idish in the URL (#isurance), then the script that you wrote in the question should work. An example of an event that triggers your code after loading a DOM is $(document).ready(function()

  • That's about it and represented everything. Now I will understand how to do it correctly. Simply adding this line triggers the second time. First, all the same, throws home, and then - all the rules. - Oleg
  • @Oleg well, that's right - first the page loads, then the script is loaded, which hangs up the handler at the click of a click. Therefore, the second time. I would advise to go to one of the solutions - either completely “hidden” content (i.e. everything is loaded, but only a part is shown), or simple links to other pages. Or even “black” - by clicking to load content from page # N.html into blocks using ajax for example (but this is slightly irrational). - alexoander