Question

我有一个CSS样式overflow: scroll;的div。它是向下滚动的长列表，但div的高度只有300px。如果我向下滚动并单击某个项目，则内容将填充窗口的右侧（列表位于左侧）。但是，列表自然会突然回到顶部以进行刷新（需要刷新以从MySQL数据库中获取内容）。

我知道，理想情况下，使用JavaScript的一种组合，jQuery或AJAX可能效果最好 - 但我只在一个小的级别上使用JS和jQuery，而且根本没有使用AJAX。我对PHP更熟悉。

编辑：由于PHP无法做到这一点，实施的最佳方式是什么？如何？

编辑2：这是我点击的链接：

<a href="items.php?id=<?php echo $cat_id; ?>&amp;item=<?php echo urlencode($row['item']); ?>"><?php echo $row['item']; ?></a>

Answer 1

在你的HTML中：

<div class='item_in_list'><a href='javascript:item_click(<?php echo $id;?>)'>Item 1</a></div>

然后是javascript：

function item_click(id)
{
$.ajax({
 type:'get',
 data:{item_id:id},
 url:'yourphppage.php',
 dataType:'html',
 success:function(response){
  $('#page_body').html(response);
  return false;
 }
});
}

Answer 2

刷新页面后，您是否尝试按ID访问元素？

基本上在你的网址上添加'#elementClickedId'？

像： http://www.w3.org/TR/html4/struct/global.html#adef-id

Answer 3

尝试使用此方法（假设jQuery已加载）：

<script>

$( '.list a' ).click( function( e ) {

    e.preventDefault();

    alert( 'Loading...' );

    $( '#resultboxontheright' ).load( 'foo.php?id=' + $( this ).attr( 'data-foo' ), function() {

        alert( 'Done!' );

    } );

} );

</script>


<ul class="list">
    <li><a href="foo.php?id=bar" data-foo="bar">Foobar</a></li>
    <li><a href="foo.php?id=foo" data-foo="foo">Foofoo</a></li>
</ul>

<div id="resultboxontheright"></div>

和foo.php：

<?php

echo '<h4>' . $_GET['id'] . '</h4>';

PHP可以在刷新时保持窗口中的位置吗？如果没有，最好的方法？

3 个答案: