Question

我有一个主要的php文件，其中有一个“导航栏”，其中包含指向各种页面的链接，点击“导航栏”项目，我希望div的内容替换为相应的页面。

navbar.php：

<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>    
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>

main.php：

<script>
$(document).ready(function() {  
$('#content').load('<?php echo $_GET['nav'] ?>');           
});
</script>

使用此代码，我希望在单击导航栏项时，div内容必须更改为相应的页面引用。我发现的是，例如，当我点击page1时，我的网址被更改为main？nav = page1.php，但是根本没有触发更改div内容的脚本。请纠正我，但我不想将链接更改为“＃”。

Answer 1

<script>
$(document).ready(function() {  
  $('uL#navbar a').click(function(e){
    e.preventDefault();
    $('#content').load($(this).attr('href'));
  });
});
</script>

Answer 2

你可以试试这个

$(document).ready(function() { 
    $('ul li a.button').on('click', function(e){
        e.preventDefault();
        $('#content').load($(this).attr('href'));           
    });
});

Answer 3

你需要使用AJAX

<script>
    $(function(){
        $('.button').on('click', function(e){
            e.preventDefault();
            $('#content').load($(this).attr('href'));
        });
    })
</script>

<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-attn"><a class="button" href="?nav=page1.php">Page1</a></li>    
<li id="nav-tran"><a class="button" href="?nav=page2.php">Page2</a></li>
<li id="nav-mr"><a class="button" href="?nav=page3.php">Page3</a></li>
<div id="content"></div>

Answer 4

尝试;

$(document).ready(function() { 
    $('.button').on('click', function(e){
        e.preventDefault();
        $('#content').load($(this).attr('href'));           
    });
});

在你的php中，更改代码以使回显看起来像;

<li id="nav-attn"><a class="button" href="yourpage.php?nav=page1.php">Page1</a></li>

根据$ _GET值更改div内容

4 个答案: