Question

在我使用bootstrap的代码中，我遇到了问题。

我正在使用如下所示的JS代码。

 $( "li:eq(1)" ).click(function() {
            $.get("./test.php")
               .done(function(data) {
                    $('#middle').html(data);
            });

控制div。

<div class="container" id=header-nav>
            <a class="brand" href="index.php"></a>
            <div class="nav-collapse collapse" >
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="test.php">test</a></li>
.......
<div class="container" id="middle"> </div>

当我点击测试按钮时，链接将变为test.php#，但没有任何变化。再次点击，它可以加载到test.php。

问题是链接是test.php，代码不起作用。当test.php#时，它有效。我想知道原因。

非常感谢。

Answer 1

问题是因为您已将处理程序附加到li元素，但单击了a元素，然后传输页面。试试这个：

$("li:eq(1) a").click(function(e) {
    e.preventDefault();
    $.get("./test.php")
        .done(function(data) {
            $('#middle').html(data);
        });
});

preventDefault()会停止链接的默认行为，这意味着您的AJAX请求会根据需要执行。

Answer 2

由于您要使用$.get（AJAX），因此您无需在<a>元素中为<li>元素提供网址，

您必须在href元素中为<a>元素提供此值：javascript:void(0)或#，

您的html代码将是：

<div class="container" id=header-nav>
            <a class="brand" href="index.php"></a>
            <div class="nav-collapse collapse" >
                <ul class="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">test</a></li>
.......
<div class="container" id="middle"> </div>

或者你必须通过添加以下内容来防止元素的默认操作阻止重新加载url：您event.preventDefault()事件中的onclick和js代码将是：

$( "li:eq(1)" ).click(function(e) {
event.preventDefault();
            $.get("./test.php")
               .done(function(data) {
                    $('#middle').html(data);
            });

index.php＃与index.php不同

2 个答案: