如何創建導航欄，單擊該導航欄會在同一頁面上將其打開？

Question

我有一點點困難的創建單擊時打開同一個頁面上的一個小窗口就像在一個導航欄圖像 。

Answer 1

創建小窗口，因為它是自己的div：

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

添加以下CSS：

#myID{

display: none; 

}

然后使用一些腳本來顯示/隱藏元素：

$(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

您可以像這樣創建導航欄。 這是唯一的假人。 在給定的圖像中，它們具有一個fix元素，並且當您單擊nav元素時，它們將更新該元素的內容。

  $('#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> 

它將幫助您創建導航欄。