javascript - 我们如何通过单击菜单栏而不刷新页面来更改 div 内容

Question

<div id="containerright">
  <div id="containerrighttop">
    <ul>
      <li><a  href="C:\Users\Ravi Ranjan\Desktop\new web\New folder/content-  1.     html">Content 1</a></li>
      <li><a  href="C:\Users\Ravi Ranjan\Desktop\new web\New folder/content-2.html">Content 2</a></li>
      <li><a  href="C:\Users\Ravi Ranjan\Desktop\new web\New folder/content-3.html">Content 3</a></li>
    </ul>
  </div>
  <div id="containerrightbottom">
  </div>
</div>
</div>

** 这是我使用 ajax 编写的脚本** 在此我想要水平方式的菜单栏，以便在单击该菜单栏时，同一页面的一部分上的 div 内容会在不刷新页面的情况下发生变化

<script type="text/javascript">

    $(function() {

        $("#conatinerright""#containerrighttop").click(function() {

            $("#conatinerright""#containerrightbottom" ).load($(this).attr("href"));

            return false;
        });

    });
</script>

Answer 1

$(function() {
    $("#containerrighttop a").click(function() {
        $("#containerrightbottom").load($(this).attr("href"));
        return false;
    });
});

你的问题是：

1. 你拼错了#containerright。不需要选择器的这一部分，因为内部 DIV 的 ID 就足够了。
2. 您通过将两个字符串彼此相邻放置而使用了无效的语法，没有+将它们连接起来。
3. 您将点击处理程序绑定到#containerrighttop，但它应该绑定到锚点。