Question

我有一个我不明白的问题，我的链接（一个href =“...”）不起作用，有人看到了错误？

  $('.site-nav__item.has-dropdown').on('click tap', function (e) {
    e.preventDefault();
    var className = "is-active";
    $(this).toggleClass(className);
  });

.site-header {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
  display: block;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  .site-nav {
    display: flex;
    height: 75px;

    &__item {
      display: inline-block;
      line-height: 73px;
      float: left;
      &.has-dropdown {
        position: relative;

        &.is-active {
          .site-nav__dropdown { display: block; }
        }
      }
    }

    &__link {
      cursor: pointer;
      display: block;
      font-size: 1.2rem;
      letter-spacing: 0.03em;
      overflow: hidden;
      padding: 0 23px;
      position: relative;
      text-transform: uppercase;
    }

    &__dropdown {
      box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
      display: none;
      left: -37px;
      min-width: 225px;
      position: absolute;
      top: 75px;
      
      &__item {
        line-height: 60px;
        text-transform: inherit;
        .site-nav__link {
          font-size: 1.4rem;
          text-transform: inherit;
        }
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="site-header">
  <nav class="site-nav">
    <ul class="site-nav__links">
      <li class="site-nav__item has-dropdown">
        <a class="site-nav__link"> Click here </a>
        <ul class="site-nav__dropdown">
          <li class="site-nav__dropdown__item">
            <a href="codepen.io" class="site-nav__link">Item 1</a>
          </li>
          <li class="site-nav__dropdown__item">
            <a href="google.com" class="site-nav__link">Item 2</a>
          </li>
          <li class="site-nav__dropdown__item">
            <a href="#" class="site-nav__link">Item 3</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="overlay"></div>
  </nav>
  </header>

单击菜单后，链接处于下拉列表中。第一个链接重定向到codepen，第二个链接重定向到谷歌...但它卡在某个地方。

谢谢！

Answer 1

你有

e.preventDefault();

你的JS代码中的

。这可以防止链接基本上成为链接。

顺便说一下。下次将JS代码放在这里

Answer 2

您忘记了http：//或https：//

<ul class="site-nav__links">
    <li class="site-nav__item has-dropdown">
      <a class="site-nav__link"> Click here </a>
      <ul class="site-nav__dropdown">
        <li class="site-nav__dropdown__item">
          <a href="http://codepen.io" class="site-nav__link">Item 1</a>
        </li>
        <li class="site-nav__dropdown__item">
          <a href="https://google.com" class="site-nav__link">Item 2</a>
        </li>
        <li class="site-nav__dropdown__item">
          <a href="#" class="site-nav__link">Item 3</a>
        </li>
      </ul>
    </li>
 </ul>

Answer 3

将锚标记更改为此

<li class="site-nav__dropdown__item">
            <a href="https://codepen.io" class="site-nav__link">Item 1</a>
          </li>
          <li class="site-nav__dropdown__item">
            <a href="https://google.com" target="" class="site-nav__link">Item 2</a>
          </li>

如果您要签入代码簿，请右键单击该链接并在新选项卡中打开，或者您可以将目标设置为空白。否则，codepen将阻止在其内部开放新网站

我的链接（一个href）不起作用

3 个答案: