Question

我有一个导航设置，当点击链接时，页面向下滚动到列表中的相应项目，在到达项目时更改链接的类别。

<nav>
<a href="#one" class="anchorLink">one</a>
<a href="#two" class="anchorLink">two</a>
</nav>


<ul>
    <li id="one"></li>
    <li id="two"></li>
</ul>

这是一个相当粗略的例子

http://jsfiddle.net/FSk5Q/1/

我还希望在项目到达后更改项目的背景颜色（最好淡化为新颜色），然后在滚动到另一个项目时恢复原始类，然后更改下一个项目的类。

非常感谢您的建议。在js部门不太好。

Answer 1

你真的不需要这么复杂，只要在可能的情况下使用CSS转换：

li:target {
    background-color: #f90;
    -moz-transition: all 2s linear;
    -ms-transition: all 2s linear;
    -o-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    transition: all 2s linear;
}

JS Fiddle demo

body {
  margin: 0;
  padding: 0;
}
nav {
  position: fixed;
  background: #fff;
  width: 10%;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.4);
  border: 2px solid #000;
}
.highlight {
  background: #b4b4b4;
}
ul li {
  list-style: none;
  margin-bottom: 10px;
  width: 300px;
  height: 500px;
  background: #ccc;
}
li:target {
  background-color: #f90;
  -moz-transition: all 2s linear;
  -ms-transition: all 2s linear;
  -o-transition: all 2s linear;
  -webkit-transition: all 2s linear;
  transition: all 2s linear;
}
li::before {
  content: 'list-element ' attr(id);
  display: block;
  text-align: right;
  font-size: 2em;
  font-weight: bold;
}

<nav>
  <a href="#one" class="anchorLink">one</a>
  <a href="#two" class="anchorLink">two</a>
</nav>


<ul>
  <li id="one"></li>
  <li id="two"></li>
</ul>

滚动到</li>时更改<li>的类

1 个答案: