Updating div content without reloading the page

Question

Hello! Help to implement the function.

There is a DIV, which should be updated by clicking on the link, while not reloading the entire page.

PS I will add. It is necessary to change the contents of the DIV block, depending on which link the user has passed.

THOSE

<a href="index.html#content" class="game"></a>

When clicking on this link, the content of the DIV block should be changed to the content that is present in the DIV with a different ID. Contents of another div hide with parameter

 display none;

These are my personal considerations. If anything is not clear, I will add.

Write in more detail what exactly should happen to the unit and where the data
I support @osrsoft, as a rule, for such purposes they use ajax technologies, the task of which is to asynchronously update the data of individual blocks.
In this example, it will be necessary to include the jquery library.

Answer 1 · 2017-03-09T18:51:44

 <a href="index.html#content" class="game" onclick=d-none('.div-class')></a>

Js

  function d-none(in) { var div = document.querySelector(in); //querySelector можно заменить на getElementByClassName или getElementById div.style.display = "none"; }

They write different commentators different and dokolupyvayutsya to the smallest detail. But the main implementation is, and you finish the work yourself as you need. In general, it is better to use angular c ng-style and ng-click for this task. Or jQuery c .css ();

You select all the elements and then hide only the first one.
I’ll add that: 1. function d-none will generate a syntax error, because d-none contains a hyphen and you cannot create a function with a hyphen in the name 2. class - a key word in modern js, you cannot call the function parameter class 3. With a flick of the wrist, you create a global variable named div.

Updating div content without reloading the page

1 answer 1

More articles: