Dynamic navigation bar with jQuery

I want to create a "changing" navigation bar. The nav bar should change with a click on one of the nav elements.

the code looks like this :

<ul>
  <li> Type
    <ul>
      <li> <a href=""> one </a></li>
      <li> <a href=""&g开发者_如何学编程t; two </a></li>
    </ul>
  </li>
  <li> Gender </li> // Lets say that this is replaceable

if I click on "one" it's "Gender". and when I click on "two" it's suppose to change to "blabla".

I wanted to ask what is the best way to replace the nav menu with jQuery, I tried replacing the HTML with .html() func but I don't know where to save my replaced code.

Meaning, I wanted to know what is the best way to keep all the code on the DOM and each time change the nav bar when clicked.

Thanks, robi

Use a class="Gender" inside your and when the user clicks change the visibility status of your li where you have used an id="Gender"

Clearly you start with all lis not visible

<ul>
  <li> Type
    <ul id="mymenu">
      <li><a href="#" class="Gender"> one </a></li>
      <li><a href="#" class="Age"> two </a></li>
    </ul>
  </li>
  <li id="Gender" class="dynamic"> Gender </li>
  <li id="Age" class="dynamic"> Gender </li>  
</ul>

your JS

 $('#mymenu a').click(function(e) { 
         e.preventDefault(); 
         ... [Change visibility accordingly]
     });

This solution needs jQuery 1.4.3 or higher.

Your HTML

<ul>
  <li> Type
    <ul id="mymenu">
      <li><a href="#" data-text="Gender"> one </a></li>
      <li><a href="#" data-text="Blabla"> two </a></li>
    </ul>
  </li>
  <li id="target"> Gender </li> 
</ul>

Your JS

$('#mymenu a').click(function(e) { 
         e.preventDefault(); 
         $('#target').text($(this).data('text')); 
});