E
E
Epic182019-11-08 09:33:20
JavaScript
Epic18, 2019-11-08 09:33:20

Application of DIV in HTML?

There is such a layout, how to make it so that when choosing a menu, the necessary information is loaded into the left column.
It seems to be done using "DIV" blocks, but I don't have any examples.
5dc50b9dbabd9054212281.jpeg

<header>   <!--Шапка и меню -->
      <ul id="navbar">
        <li> <a href="#" >Меню 1 </a> </li>
        <li> <a href="#" >Меню 2 </a> </li>
        <li> <a href="#" >Меню 3 </a> </li>
      </ul>	
    </header>
     
     
    <div id="leftColumn">
      
      <!--Меню 1 -->
      <div id="me1"> 
      
      </div>
      
      
      <!--Меню 2 -->
      <div id="me2">
      
      </div>
      
      
      <!--Меню 3 -->
      <div id="me3"> 
      
      </div>
      
    </div>

Answer the question

In order to leave comments, you need to log in

3 answer(s)
J
Jupiter Max, 2018-10-10
@denism300

what exactly doesn't work? does not fulfill animate?

E
Epic18, 2019-11-08
@Epic18

Issue resolved. Applied javascript.

function openbox(id){
      var container = document.querySelector("#leftColumn");
      var elements = container.querySelectorAll("div.element > div");
        for(var i=0; i<elements.length; i++){
          elements[i].style.display = (elements[i].id == id) ? 'block' : 'none' ;
        }
    }

R
Robert-critical-thoughts, 2019-11-08
@criticalsomethoughts

This is called tabs (tabs) - here is an example with codepen, it shows a technical implementation without js. There are a lot of examples on the codepen.
Example - Link

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question