Php &引用；分页“；具有动态定义的按钮数量的滚动选项卡组

我想以某种方式“分页”我的滚动功能，以便我可以选择从一个“选项卡/按钮”列表，它将自动滚动到“div/tab”。。。这是我所拥有的，这是通过一个while语句在我的数据库中生成歌曲，每个“标签”都是它自己的歌曲

///PHP///
$x=count($array);
$song .= '
<div class="tab">
   <div id="full">
    <div id="container" style="color:#00234A;"><h1>' . $title . '</h1></div>
    <hr style="margin-bottom:10px;" />
    <div class="transpose" style="background-color:#F3F3F3; border: 1px solid #D1D1D1; font-size:13px; padding:3px 10px; color:#225c7e; margin-bottom:10px;">
//////////HERE IS WHERE I WOULD LIKE THE BUTTONS//////////////////////
    transpose:&nbsp; 
      <a class="transposeUp" id="transposeUp'.$vID.'" title="transpose up" 
        onclick="return false" 
        onmousedown="transposeUp(\''.$vID.'\');">
      <span>&and;</span></a>&nbsp;
      <a class="transposeDown" id="transposeDown'.$vID.'" title="transpose down" 
        onclick="return false" 
        onmousedown="transposeDown(\''.$vID.'\');">
      <span>&or;</span></a>
    </div><br /><br />';
   </div>
</div>

还有HTML

<div class="mainBodyTable">
    <div style="background-color:white; padding:10px 15px;">                    
        <div class="scrollable">
            <div class="window">
                <div class="space">
                    <div class="tabs">
                        <?php echo $song; ?>
                    </div>
                </div>
            </div>
            <a href="#" class="left">&larr;</a>
            <a href="#" class="right">&rarr;</a>
        </div>
    </div>
</div>

这个想法是，将有一个由$x定义的框，每个框中都有各自的编号。单击它时，它将滚动到相应的div。

---

有人能至少在方向上帮忙吗？提前感谢…

要使用此解决方案，您需要编写php，以便选项卡具有与相关歌曲相匹配的类属性

yourClassSelector

，以及递增id属性

比如：

<?php 
    $i = 1;
    $count_of_tabs = // count() or my_sql_num_rows();

    while $i < $count_of_tabs:
       name_tab("your_tabs", $your_tab_array, $i);
       $i++;
    endwhile;

    function name_tab($tab_id_string, $tab_array, $b) {
       foreach($tab_array as $cur_tab) {
           $output = // insert html;
           $output .= $tab_id_string . $b;
           $output .= // insert more html;
           echo $output;
       }
    }
?>

<script type="text/javascript">

// I adapted this from another post on stackoverflow. I didn't write getOffset.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery('.yourClickSelector').click(function(e) {
  e.preventDefault(); 

  var tabId = jQuery(this).attr("id");

  var songId = jQuery(tabId + '-song');

  var x = getOffset( document.getElementById(songId) ).left;
  var y = getOffset( document.getElementById(songId) ).top;
  window.scrollTo(x,y)
});

</script>

//我根据stackoverflow上的另一篇文章改编了这篇文章。我没有写getOffset。
函数getOffset（el）{
var x=0；
var _y=0；
而（el&&！isNaN（el.offsetLeft）和&！isNaN（el.offsetTop））{
_x+=el.offsetLeft-el.scrollLeft；
_y+=el.offsetTop-el.scrollTop；
el=el.offsetParent；
}
返回{top:_y，left:_x}；
}
jQuery（'.yourClickSelector'）。单击（函数（e）{
e、 预防默认值（）；
var tabId=jQuery（this.attr（“id”）；
var-songId=jQuery（tabId+'-song'）；
var x=getOffset（document.getElementById（songId））.left；
var y=getOffset（document.getElementById（songId））.top；
窗口。滚动到（x，y）
});

---

我写完后没有校对，所以请不要在阅读之前复制粘贴并插入。

谢谢，让我看看是否可以继续

<div class="mainBodyTable">
    <div style="background-color:white; padding:10px 15px;">                    
        <div class="scrollable">
            <div class="window">
                <div class="space">
                    <div class="tabs">
                        <?php echo $song; ?>
                    </div>
                </div>
            </div>
            <a href="#" class="left">&larr;</a>
            <a href="#" class="right">&rarr;</a>
        </div>
    </div>
</div>

<?php 
    $i = 1;
    $count_of_tabs = // count() or my_sql_num_rows();

    while $i < $count_of_tabs:
       name_tab("your_tabs", $your_tab_array, $i);
       $i++;
    endwhile;

    function name_tab($tab_id_string, $tab_array, $b) {
       foreach($tab_array as $cur_tab) {
           $output = // insert html;
           $output .= $tab_id_string . $b;
           $output .= // insert more html;
           echo $output;
       }
    }
?>

<script type="text/javascript">

// I adapted this from another post on stackoverflow. I didn't write getOffset.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery('.yourClickSelector').click(function(e) {
  e.preventDefault(); 

  var tabId = jQuery(this).attr("id");

  var songId = jQuery(tabId + '-song');

  var x = getOffset( document.getElementById(songId) ).left;
  var y = getOffset( document.getElementById(songId) ).top;
  window.scrollTo(x,y)
});

</script>