Question

我的问题是这样的：我用链接填充无序列表，除了indexLink之外，所有格式都正确 - 它缩小了一点。我无法找到问题，我已经仔细检查了每个部分，从头开始重写了包含链接的代码，但我仍然无法找到问题。这是我的javascript：

function addCrumb() {
  /* reads from localStorage and determines which links go where */
  for (i = hIndexCount; i >= 0; i--) {
    if (localStorage.history.charAt(i) === "a") {
      ridingHood[i] = '<a href="aboutme.html"><span class="aboutMeLink">About Me</span></a>';
    } else if (localStorage.history.charAt(i) === "e") {
      ridingHood[i] = '<a href="experiments.html"><span class="experimentsLink">Experiments</span></a>';
    } else if (localStorage.history.charAt(i) === "i") {
      ridingHood[i] = '<a href="../index.html"><span class="indexLink">Sprit Index</span></a>';
    } else if (localStorage.history.charAt(i) === "p") {
      ridingHood[i] = '<a href="professional.html"><span class="professionalLink">Professional</span></a>';
    } else if (localStorage.history.charAt(i) === "s") {
      ridingHood[i] = '<a href="school.html"><span class="schoolLink">School</span></a>';
    }
  }

  //window.alert(ridingHood + " " + h + " " + localStorage.history.length);

  displayCrumbs();
}

function displayCrumbs() {
  ridingHood[hIndexCount] = '<li><span class="firstLink">' + ridingHood[hIndexCount] + '</span></li>';
  ridingHood[hIndexCount - 1] = '<li><span class="secondLink">' + ridingHood[hIndexCount - 1] + '</span></li>';
  ridingHood[hIndexCount - 2] = '<li><span class="thirdLink">' + ridingHood[hIndexCount - 2] + '</span></li>';
  ridingHood[hIndexCount - 3] = '<li><span class="fourthLink">' + ridingHood[hIndexCount - 3] + '</span></li>';

  /* cycles through and displays each ridingHood index */
  for (i = hIndexCount; i >= 0; i--) {
    document.getElementsByClassName("history")[0].innerHTML += ridingHood[i];
  }
}

html：

<nav>
    <ul class="history">

    </ul>
</nav>

感谢您的时间！需要帮助请叫我。：）

编辑：想想我可以将网站上传到学生服务器以获取实例，here we go！

Answer 1

在index.css中你有：

.aboutMeLink, .schoolLink, .experimentsLink, .professionalLink {
  height: 4.2em;
  width: 0%;
  z-index: -1;
  position: relative;
  margin: auto;
  border-left: 6px solid rgba(255, 255, 255, 0);
  border-right: 6px solid rgba(255, 255, 255, 0);
  -webkit-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s;
  -moz-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s;
  -ms-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s;
  -o-transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s;
  transition: background .6s ease-in-out, width .4s ease-in-out, border-color .2s ease-in-out .5s;
}

此样式中未包含.indexLink，因此该链接与其他链接的样式不同。添加.indexLink即可。

或者，不是列出所有这些类，而是为这些元素提供一个像sidebarLink这样的公共类，并将该样式应用于该类。

列表中的特定项目与其他项目的格式不同

1 个答案: