尝试创建锚链接

时间:2018-07-03 21:53:05

标签: html5 navigation

我正在尝试在同一页面中创建基本锚链接。我正在使用Bootstrap 4(无论是否有所作为)。链接和目标都在服务器端包含中。我想从上级导航“联系”链接到页脚中的表单。

在“ upperNav”中,我包含以下内容:

<a class="nav-link text-light main-menu" href="#contactMe">Contact</a>

在“页脚”中包含以下内容:

<p class="contactUs"><a id="#contactMe">Contact Us</a></p>

但是由于某种原因,它不起作用。我已经研究了这个问题,但无济于事。有什么建议吗?

<!--   From: https://www.jquery-az.com/bootstrap4/demo2.php?ex=91.0_8   -->
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-info ">
  <a class="navbar-brand text-light logo-text" href="http://shamar.org/" >shamar.org</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#demo-navbar" aria-controls="demo-navbar" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="demo-navbar">
    <ul class="navbar-nav mr-auto" id="menu">
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="/index.html">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="/articles/index.html">Articles</a>
      </li>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="/weblog/">Blog</a>
      </li>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="/books.html">Books</a>
      </li>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="/multimedia/index.html">Multimedia</a>
      </li>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="/about.html">About</a>
      </li>
      </li>
      <li class="nav-item">
        <a class="nav-link text-light main-menu" href="#contactMe">Contact</a>

      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-light submit2 my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

1 个答案:

答案 0 :(得分:5)

更改

<a id="#contactMe">Contact Us</a>

收件人

<a id="contactMe">Contact Us</a>