javascript - 列表中的特定元素与其他元素的格式不同

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，并将样式应用于该类。