jquery - 在特定 div 中加载页面

Question

我有一个指向不同网址的引导导航列表

   <div class="span2">
                <div class="sidebar-nav">
                    <ul class="nav nav-list">                       
                        <li class="active">
                            <a class="pass" href="#">Password</a>
                        </li>
                        <li>
                            <a class="favor" href="#">My Favorites</a>
                        </li>
                        <li>
                            <a class="open" href="#">Open</a>
                        </li>
                    </ul>
                </div>
        </div>

当我单击任何 url 时，我想在下面给出的 div 中加载页面而不打开新页面，我该怎么做？

 <div class="span10">
            <div class="page-content">
                  <div class="pass">
                  </div>
                  <div class="favor">
                  </div>
                  <div class="open">
                  </div>
            </div>
        </div>

Answer 1

您需要使用 JQuery .load()

http://api.jquery.com/load/

所以，首先你需要给你的目标 div 一个 id，像这样：

<div class="span10" id="target">

然后您需要将 onClick 事件绑定到运行以下加载的每个链接

$('#target').load('/url/for/passwordadmin');

绑定 onClick 事件的建议方法是在 document.ready 上运行它：

$(".passwordAdmin").click(function() {
  $('#target').load('/url/for/passwordadmin');
});

您应该为每个应该具有此功能的链接执行此操作。