Question

我创建了一个导航栏，并且导航菜单包括列表，如家庭，关于我们等等。当我单击导航栏时，导航菜单会向下滑动并显示导航链接列表。当我点击navlink时。关于我们的导航菜单会向上滑动，但是关于我们的页面不会打开。

HTML

<div class="navbar">menu<span><img src="images/menu-arrow.png"></span></div>
<div class="nav-menu">
    <ul>
        <li><a href="index.html" id="home" class="nav-link"><h1>Home</h1></a></li>
        <li><a href="about-us.html" id="home" class="nav-link"><h1>About us</h1></a></li>
        <li><a href="services.html" id="services" class="nav-link"><h1>Services</h1></a></li>
    </ul>
</div>

jQuery

$(function(){
    $(".nav-menu li a").click(function(e){
        e.preventDefault(); //To prevent the default anchor tag behaviour
        $('.navbar span img').removeClass('flipped').css({"transition":".5s"});
        $('.nav-menu').animate({'height':'toggle'});
        var url = this.href;
        $(".main-container").load(url);
    });
});

当我单击导航链接时，我确实想要，导航菜单向上滑动，然后当前页面淡出，同时显示或显示目标页面。

Answer 1

如果我理解正确，那么您只需要在菜单链接中添加target属性：

<div class="navbar">menu<span><img src="images/menu-arrow.png"></span></div>
<div class="nav-menu">
    <ul>
        <li><a href="index.html" target="_self" id="home" class="nav-link"><h1>Home</h1></a></li>
        <li><a href="about-us.html" target="_self" id="home" class="nav-link"><h1>About us</h1></a></li>
        <li><a href="services.html" target="_self" id="services" class="nav-link"><h1>Services</h1></a></li>
    </ul>
</div>

Answer 2

$(function(){
    $(".nav-menu li a").click(function(e){
        e.preventDefault(); //To prevent the default anchor tag behaviour
        $('.navbar span img').removeClass('flipped').css({"transition":".5s"});
        $('.nav-menu').animate({'height':'toggle'});
        var url = this.href;
        window.open(
          url,
          '_blank' // <- This is what makes it open in a new window.
        );
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navbar">menu<span><img src="images/menu-arrow.png"></span></div>
<div class="nav-menu">
    <ul>
        <li><a href="index.html" id="home" class="nav-link"><h1>Home</h1></a></li>
        <li><a href="about-us.html" id="home" class="nav-link"><h1>About us</h1></a></li>
        <li><a href="services.html" id="services" class="nav-link"><h1>Services</h1></a></li>
    </ul>
</div>

我根据您提供的代码创建了这个小提琴。现在显然您不能在小提琴上运行它，但是

window.open(
      url,
      '_blank' // <- This is what makes it open in a new window.
    );

将为您打开一个新标签。

单击导航链接后，在同一窗口中打开html页面

2 个答案: