Question

当点击索引等效于INDEX的LI时，我正在尝试使用相同的CLASS滚动一组DIV（PHP生成的）。任何关于如何实现这一点的想法。

HTML

<ul class="bar-transport">
  <li><a href="Affordable">Affordable</a></li>
   <li><a href="reliable">Reliable</a></li>
<li><a href="#">Responsive</a></li>
</ul>
      <div class="topic-intro">One</div>
        <div class="topic-intro">Two</div>
      <div class="topic-intro">Three</div>

的jQuery

jQuery(document).ready(function($) {

    $("ul.bar-transport li a").click(function(event){       

        event.preventDefault();
        $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1700);
    });

});

Answer 1

如果我理解正确，你需要这样的东西：

$('a').click(function(e) {
    e.preventDefault();
    var link_index = $(this).index('a');
    var div = $('.topic-intro').eq(link_index);
    $('html body').animate({
        scrollTop: div.offset().top - 10
    }, 300);
});

演示：http://jsfiddle.net/WN5Tr/1/

问题是，在这种情况下，我个人不会使用索引，因为此解决方案容易出错。我会使用独特的href-id对，所以结构如下：

<a href="#section1">
<a href="#section2">
<a href="#section3">

<div id="section1"></div>
<div id="section2"></div>
<div id="section3"></div>

Answer 2

这有效，但我必须创建一个将ID分配给DIV（onload）的函数，因为它们是动态生成的。见下面的功能。

<强> HTML

<ul class="bar-transport">
<li><a href="#affordable">Affordable</a></li>
<li><a href="#expandable">Expandable</a></li>
<li><a href="#responsive">Responsive</a></li>
</ul>

<强>脚本

   jQuery(document).ready(function ($) {
        $h = jQuery.noConflict();
        console.log($h)
        $h("body > .ti").attr('id', 'affordable');
        $h("body > .ti + .ti").attr('id', 'expandable');
        $h("body > .ti + .ti + .ti").attr('id', 'responsive');
    });


 jQuery(document).ready(function($) {

    $("ul.bar-transport li a").click(function(event){       

        event.preventDefault();
        $('html,body').animate({scrollTop: $($(this).attr('href')).offset().top}, 1700);
    });

});

分别滚动具有相同类的多个DIV

2 个答案: