如何创建导航栏，单击该导航栏会在同一页面上将其打开？

Question

我有一点点困难的创建单击时打开同一个页面上的一个小窗口就像在一个导航栏图像 。

Answer 1

Create the small window as it's own div:

<div id="myID"> This content will show when I click the navbar</div>

Add the following CSS:

#myID{

display: none; 

}

Then use some script to show/hide the element:

$(document).ready(function(){

// change #nav to whatever the ID of the nav element is.
  $('#nav').on('click', function(){

    // show/hide pop up on click
    $('#myID').toggle();

  });
});

Answer 2

You can create a Navbar like this. This is the only dummy. In given image, they have one fix element and when you click on nav element according to that they are updating the content of that element.

  $('#myNav').find('li a').click(function (e) { $('li.active').removeClass('active'); $(this).parent('li').addClass('active'); $('#main').html($(this).html()); }); 

 ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #567; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover:not(.active) { background-color: #ccc; } .active { background-color: #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="myNav"> <li class="active"><a href="javascript:void(0);">Home</a></li> <li><a href="javascript:void(0);">Service</a></li> </ul> <div id="main"> Home </div> 

It will help you to create a nav bar.