jQuery + JavaScript滚动到嵌套在多个div中的div

时间:2019-03-04 20:19:00

标签: javascript jquery html

我有一个Django模板,其中有两个制表符内容div。

在div A内,单击随机列表项时,应显示div B(应隐藏div A)。

Biv包含多个“卡” div及其唯一ID = {{card_id}}。

 google.visualization.events.addListener(chart, 'click', function(e) {
    var match = e.targetID.match(/hAxis#\d#label#(\d)/);
    if (match != null && match.length) {
      var rowIndex = parseInt(match[1]);
      var label = data.getValue(rowIndex, 0);

      $('#divA').tab('hide');
      $('#divB').tab('show');

      # this does not work
      $('.card-container', '.card').animate({
        scrollTop: $('#'+label).offset().top
        },'slow');
     }
});

以下是同一代码:

 <div class="tab-content">

      <div id="divA" class="tab-pane fade in active">
        <div id="chart_div" class="graph-container"></div>
      </div>

      <div id="divB" class="tab-pane fade">
        <div class="card-container">
         {% for k, val in object_data.items %}
         <div class="card" id={{object}}>
           <div class="card-header">
             <label class="label-category">{{object}}</label><hr>
           </div>
           <div class="card-body">
             <div class="card-text">
                <ul class="list-group list-group-flush">  
                  {% for r in val %}
                    <li class="list-group-item">{{r}}</li>
                  {% endfor %}
                </ul>
              </div>
             </div>  
           </div>
         </div>
         {% endfor %}
        </div>
      </div>

 </div>

但是,单击选项卡不会将程序根据其ID转到另一个div的特定“卡片” div。该程序应向下滚动到特定的“卡片” div。

1 个答案:

答案 0 :(得分:0)

应该很简单:

$('.card').animate({
    scrollTop: $('#'+label).offset().top
},'slow');