Question

我无法弄清楚为什么我的<a href>标签不起作用。我在<ul>的页面顶部有完全相同的标记，它完美无缺。当我复制并粘贴（也尝试重新键入）<div>进一步向下的完全相同的行时，它不起作用。封装的文本变成了紫色。

<a>标记周围的代码结构如下：

<div class="parallax__layer parallax__layer--deep" >

    <label> Some Text</label>

        <div style="position: absolute;
                left: 30%;
                width: 70%;
                margin-top: 10%;">

                <p style="position: absolute;
                            text-align:center; 
                            border-right: 2px solid #484848;
                            line-height: 125%;
                            color: #484848;
                            width: 70%;
                            font-family: sf_regular;">

                  This the paragraph <br>
                  <b>I want to insert</b>
                  a link in.

                  <br><br>
                  <img src="some_image.png" width = "70px" length = "70px"/>
                  <br><br>

                  <a href="#group5"> This Link </a> wont work!

                  </p>              

        </div>

</div>

<div id="group5" class="parallax__group">


  <div class="parallax__layer parallax__layer--base">
    This is group 5
  </div>

</div>

<ul>工作得很好（顺便说一下，它不在任何<div>中）：

 <nav>
 <ul class="nav">
  <li><a href="#group1">Home</a></li>
  <li><a href="#group2">Features</a></li>
  <li><a href="#group3">Services</a></li>
  <li><a href="#group4">C2A</a></li>
  <li><a href="#group5">Contact Us</a></li>

 </ul>
 </nav>

CSS：

.parallax {
min-height: 600px; /* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
perspective-origin-x: 100%;
}

.parallax__group {
 position: relative;
 min-height: 600px; /* fallback for older browsers */
 height: 100vh;
 -webkit-transform-style: preserve-3d;
 transform-style: preserve-3d;
}

.parallax__layer {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 transform-origin-x: 100%;
 }

 .parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(.7);
  transform: translateZ(90px) scale(.7);
  z-index: 1;
  }

 .parallax__layer--base {linking works fine from here
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
  }

  .parallax__layer--back {
   -webkit-transform: translateZ(-300px) scale(2);
   transform: translateZ(-300px) scale(2);
   z-index: 2;
   }

  .parallax__layer--deep {//group with problematic link
   -webkit-transform: translateZ(-600px) scale(3);
   transform: translateZ(-600px) scale(3);
   z-index: 2;
   }

  #group4 {//group with problematic link
    z-index: 2; /* slide under group 3 and 5 */
   }

   #group4 .parallax__layer--deep {
   background: #f7f7f7
   }

 #group5 {
   z-index: 3; /* slide over group 4 and 6 */
  }

 #group5 .parallax__layer--base {
  background: #484848;
  }

<a>标记的确切行在页面开头完全正常。我错过了什么？

P.S：我是网络开发的新手，但我很确定我的元素嵌套不违反W3C原则。

Answer 1

是否可以将另一个元素放在链接的顶部？这可以解释为什么它在悬停时不会显示网址。你说，你能够检查它 - 但你是否也可以右键点击链接？如果右键单击链接并单击“Inspect element”（或类似），那么在开发工具中选择了哪个元素？

Answer 2

我认为您正在使用parallax.js插件，这可能会让锚标签不起作用。尝试删除视差插件。

锚标签不会工作

2 个答案: