Question

我在div s中有3列的布局：cMenu，cList和cContent。

在菜单中，我使用：

<script>
    $(document).ready( function() {
        $("#mMateriasPrimas").on("click", function() {
            $("#cLista").load("materias_primas_lista.php");
        });
    });
</script>

<div class="menu_wrapper">
    <div class="menu_item">
        <a href="materias_primas.php" id="mMateriasPrimas">Matérias primas</a>
    </div>
    <div class="menu_hover">
    </div>

<!-- other menu itens following here -->
</div>

这是我的HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <title></title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <link href="css/style.css" rel="stylesheet">
    <link href="css/typo.css" rel="stylesheet">    
    <script src="js/jquery.min.js"></script>    
</head>
<body>
<?php require 'includes/connect_link.php' ; ?>
<div class="wrapper">
    <div class="header">
        <strong>TOP</strong>
    </div><!-- .header-->
    <div class="middle">
        <div class="container">
            <main class="content">
                <strong>MAIN</strong> 
            </main><!-- .content -->
        </div><!-- .container-->
        <div class="left-sidebar" id="cMenu">
            <?php require '_menu.php'; ?>
        </div><!-- .left-sidebar -->
        <div class="right-sidebar" id="cLista">
            <?php // require 'materias_primas_lista.php'; ?>
        </div><!-- .right-sidebar -->
    </div><!-- .middle-->
</div><!-- .wrapper -->
<div class="footer">
    <strong>Footer</strong> 
</div><!-- .footer -->
</body>
</html>

当我点击我的链接时，cList div会收到正确的文件并重新加载整个页面。

有人可以帮助我吗？

Answer 1

单击链接时的默认操作是加载href。您可以通过拨打event.preventDefault()来阻止它。

$("#mMateriasPrimas").on("click", function(event) {
    event.preventDefault();
    $("#cLista").load("materias_primas_lista.php");
});

问题：整个页面加载而不只是带有.load（）的div

1 个答案: