更改div的内容，在<a>单击[关闭]

提问于 2024-05-19T12:49:37+08:00

浏览次

0

我想实现这种行为：

在页面的左侧，有一个带链接的导航，在页面的右侧有一个空白的div . 当用户点击链接时，右侧的内容会发生变化 . 所有其他链接也应该相同 .

我的问题是，实现这一目标的最佳方法是什么？我正在考虑JQuery选项卡，只是样式选项卡的 Headers 看起来像一个链接，但这两个div之间有差距，所以我想这是不可能的 .

1 回答

3
您不需要使用jQuery选项卡 .

请记住，SF不是脚本的来源，因此，您应该先尝试一些事情并在发布疑问之后再分析一些可能对您有帮助的代码 .

你有很多选择，但是，基于你所说的 . 我不知道你只想用javascript做，对吧？

所以，您可以使用这样的jQuery来实现这一点 .

jQuery的
```
$(document).ready(function(){
    $('#left-side a').click(function(e){
        e.preventDefault();
        $.ajax({url: $(this).data('target'), dataType: 'html', success: function(result){
            $("#right-side").html(result);
        }});
        return false;
    });
});
```
HTML：
```
<div id='left-side'>
    <ul>
        <li><a href='#' data-target='aa.html'>Page 1</a></li>
        <li><a href='#' data-target='page2.html'>Page 2</a></li>
        <li><a href='#' data-target='page2.html'>Page 2</a></li>
    </ul>
</div>
<div id='right-side'>
</div>
```
每次单击某个链接时，此脚本将使用ajax加载已定义的页面 . 我建议你使用服务器端实现这一点，但是，这也有效 .

希望它能帮到你 .
回复于 2024-05-19T12:49:37+08:00

相关问题