Menu nav single page

Question

Menu nav single page

Navigation

#1 by (2 votes)

0

I have this menu in nodejs (jade / pug)

extends ../templates/default

block content
  nav#colorNav
      ul
        li.green
          a.icon-home(href='#')
          ul
            li
              a(href='#') Generar
            li
              a(href='#') Cierre
            li
              a(href='#') Conteo
        li.red
          a.icon-cogs(href='#')
          ul
            li
              a(href='#')
            li
              a(href='#')
            li
              a(href='#')
            li
              a(href='#')
        li.blue
          a.icon-twitter(href='#')
          ul
            li
              a(href='#')
            li
              a(href='#')
        li.yellow
          a.icon-beaker(href='#')
          ul
            li
              a(href='#')
            li
              a(href='#')
            li
              a(href='#')
            li
              a(href='#')
        li.purple
          a.icon-envelope(href='#')
          ul
            li
              a(href='#')

and it looks like this

What I want to do is that when I click on the generate item, for example, I would create a h3 = 'Generate' but without leaving the menu, which is on the same page.

nodejs jade pug

asked by Eduard 06.06.2017 в 19:21

source

1 answer

Visual error studio 2013 Center div always to the center vertically

score 2 · Accepted Answer

For this you have to use javascript in the client, it can not be just using html or jade. What you have to do is assign an event to a or a button, and generate a dynamic content with javascript or jquery or your preferred framework.

var content = document.getElementById('content')

function addH1() {
  // Hay muchas formas mejor de hacerlo pero solo para la desmostracion: 
  content.innerHTML += "<h1> Generar </h1>";
}

<h3>
<a onClick="addH1()" href="#"> Generar </a>
</h3>
<div id="content">
</div>

I leave the example in html so you can try it here