Question

下面的代码用于菜单，所有链接都向下滚动到某个部分，“博客”按钮除外，该按钮应将用户引导到另一个链接，但它不起作用，仅当我编写单击并选择“打开”时它才起作用在新标签页中

这是代码

<div class="header-menu-and-meta">
    <ul id="main-menu" class="main-menu">
        <li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
        <li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
        <li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
        <li><a data-scroll-nav="0" href="#header">main</a></li>
    </ul>
    <div class="header-meta">
        <div class="hm-content">
            <a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
        </div><!-- .hm-content end -->
    </div><!-- .header-meta end -->                             
    <div class="mobile-menu-btn hamburger hamburger--slider">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </div><!-- .mobile-menu-btn -->
<!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->

Answer 1

如果您想在新标签页中打开链接，则可以使用target='_blank'属性。如果要在同一窗口中打开它，则不要包含此属性。请参见下面的代码段。（请注意，目标空白属性在此网站上不起作用，因此请在本地或此fiddle上进行测试）

还要确保您拥有完整的URL，包括www.

<div class="header-menu-and-meta">
  <ul id="main-menu" class="main-menu">


    <li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
    <li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
    <li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
    <li><a data-scroll-nav="0" href="#header">main</a></li>
  </ul>
  <div class="header-meta">
    <div class="hm-content">
      <a class="header-btn scroll-to btn small colorful hover-white" href="http://www.example.com/blog/" target="_blank">Blog</a>
    </div>
    <!-- .hm-content end -->
  </div>
  <!-- .header-meta end -->
  <div class="mobile-menu-btn hamburger hamburger--slider">
    <span class="hamburger-box">
      <span class="hamburger-inner"></span>
    </span>
  </div>
  <!-- .mobile-menu-btn -->
  <!-- <div class="clearfix"></div> -->
</div>
<!-- .header-menu-and-meta end -->

Answer 2

它对我来说很好，它重定向到链接。

<div class="header-menu-and-meta">
    <ul id="main-menu" class="main-menu">
        <li><a data-scroll-nav="4" href="#cta-title-1">contact</a></li>
        <li><a data-scroll-nav="3" href="#clients-testmonials">clients</a></li>
        <li><a data-scroll-nav="1" href="#fun-facts">about</a></li>
        <li><a data-scroll-nav="0" href="#header">main</a></li>
    </ul>
    <div class="header-meta">
        <div class="hm-content">
            <a class="header-btn scroll-to btn small colorful hover-white" href="http://example.com/blog/">Blog</a>
        </div><!-- .hm-content end -->
    </div><!-- .header-meta end -->                             
    <div class="mobile-menu-btn hamburger hamburger--slider">
        <span class="hamburger-box">
            <span class="hamburger-inner"></span>
        </span>
    </div><!-- .mobile-menu-btn -->
    <!-- <div class="clearfix"></div> -->
</div><!-- .header-menu-and-meta end -->

Answer 3

您可以通过设置target属性来控制定位标记的重定向行为。

默认情况下，它具有自我：target="_self"

您想要实现的是target="_blank"

我从Mozilla开发人员网络中获取了图像剪辑。

Answer 4

好吧，我发现问题出在JS文件中，HTMLAnchorElement设置为preventdefault

href链接按钮无法使用html

4 个答案: