Question

我创建了3个带有hrefs的链接，这些链接链接到我网站根目录中的页面，然后我创建了一个click事件，当被触发时使用ajax来加载hrefs适当的页面。我的问题是，在这样做时，我的网址保持不变。如何将href值附加到网址？

我的代码示例：

    <ul id="nav">
    <li><a href="page1.html">Link 1</a></li>
    <li><a href="page2.html">Link 2</a></li>
</ul>

$(document).ready(function() {    

$('#nav li a').click(function(e) {
    var href = $(this).attr('href');

    $.ajax({
        url : href,
        method : 'get',
        success : function(data) {
            $('#content').html(data);
            console.log('complete');  
        } 
    });

    e.preventDefault();
});

所有建议欢迎:) 感谢

Answer 1

我假设您的意思是要将其附加到当前页面网址

在这种情况下，你应该能够这样做：

$.ajax({
        url : window.location.href + "/" + href,
        method : 'get',
        success : function(data) {
            $('#content').html(data);
            console.log('complete');  
        } 
    });

编辑：

获得ajax页面后，您可以访问其中的元素。例如，如果您在页面上有div，则可以在成功函数中选择它。试试这个：

success : function(data) {
                var $selectedElement = $(data).find("#SELECTYOURELEMENT");
                $('#content').html($selectedElement);
                // or you can append the element to your content if you would prefer that
                console.log('complete');  
            }

Answer 2

$(function() {
    $('#nav li a').click(function(e) {
        e.preventDefault();
        $('#content').load(this.href);
    });
});

Answer 3

jquery地址插件非常易于使用：

http://www.asual.com/jquery/address/

并且历史插件对于您想要的内容以及在ajax站点中处理后退按钮等的使用也很有用。

http://tkyk.github.com/jquery-history-plugin/

Answer 4

我创建了3个链接，所有链接都链接到我站点根目录中的页面，然后我创建了一个click事件，当被触发时使用ajax加载hrefs适当的页面。但页面不加载。我的HTML示例代码

<div class="nav-tabs-custom">
            <ul  class="nav nav-tabs" id="nav">
               <li class="active">
                 <a  href="tab1.html" data-toggle="tab" >Apply Leaves</a>
              </li>
               <li>
                 <a  href="tab2.html" data-toggle="tab" >My Leaves</a>
              </li>
               <li>
                <a  href="tab3.html" data-toggle="tab" >Leave Record</a>
             </li>
           </ul>
           <div class="tab-content" id="ajax-content">

           </div>

和我的jquery代码

$（document）.ready（function（）{

$("#nav li a").click(function() {

    $("#ajax-content").empty().append("<div id='loading'><img src='../static/js/ajax-loader.gif' alt='Loading' /></div>");
    $("#nav li a").removeClass('active');
    $(this).addClass('active');

    $.ajax({ url: this.href, success: function(html) {
        ("#ajax-content").empty().append(html);
            alert(this.href);
        }
});
return false;
});

}）;

使用jquery ajax时将页面附加到我的URL

4 个答案: