Question

创建导航栏时遇到一些困难，单击该导航栏会在同一页面上打开一个小窗口，例如the image。

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>

它将帮助您创建导航栏。

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

2 个答案: