Question

我有一组链接：

<div id="links">
<a>A</a>
<a>B</a>
<a>C</a>
…
</div>

在同一页面中，我还有一组标签：

<ul id="target">
<li>#1</li>
<li>#2</li>
<li>#3</li>
….
</ul>

我怎样才能成为第一个＆lt; a＆gt;（A）滚动到第一个＆lt; li＆gt;（＃1）和第二＆lt; a＆gt;（B）滚动到第二个＆lt; li＆gt;（＃2）和第三＆lt; a＆gt;（C）滚动到第三个＆lt; li＆gt;（＃3）等等......

注意： 链接的数量及其目标未修复它是动态的，因此我无法在每个项目中添加id。

Answer 1

向列表元素添加ID，并将其链接起来。

<div id="links">
    <a href="#link_1">A</a>
    <a href="#link_2">B</a>
    <a href="#link_3">C</a>

<ul id="target">
    <li id="link_1">#1</li>
    <li id="link_2">#2</li>
    <li id="link_3">#3</li>
</ul>

当然，此解决方案不会为滚动设置动画，因此您可以跳转到文档中的位置。添加一个添加滚动动画的jQuery插件应该可以在不改变代码的情况下工作。

Answer 2

只需在每个项目中添加ID即可。

＆＃13;

$(document).on('click', 'a', function(event) {
  event.preventDefault();

  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 500);
});

＆＃13;

#links {
  height: 500px;
}
#target li {
  line-height: 300px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="links">
  <a href='#1'>A</a>
  <a href='#2'>B</a>
  <a href='#3'>C</a>
  …
</div>



<ul id="target">
  <li id='1'>#1</li>
  <li id='2'>#2</li>
  <li id='3'>#3</li>
  ….
</ul>

＆＃13;

Answer 3

使用jQuery，你可以这样做：

@Html.DropDownList("The name of the field", Model, new { @class = "any-class"})

这是一个有效的例子：

https://jsbin.com/ruwacejifi/edit?html,js,output

第n个链接以相同的顺序滚动到第n个li

3 个答案: