Question

我正在建立一个带有标签AJAX系统的网站。

每个页面都有一个标签。例如：

<a href="#page1">Page 1</a>
<a href="#page2">Page 2</a>

这一切都很好。问题是，它运作不顺畅。

如果我按下第2页没有任何反应，但网址更改为＃page2。然后按第1页，URL更改为＃page1，而不显示第1页显示第2页。

此外，当我转到index.php时，我希望它重定向到主标签页面。例如。 index.php#home

这似乎也不起作用。

这是我的代码：

$(document).ready(function () {

    if(window.location.hash == ''){

        document.getElementById('link_hem').click();

    }

    //highlight the selected link
    $('a[href=' + document.location.hash + ']').addClass('active');

    //Seearch for link with REL set to ajax
    $('#menu a').click(function () {

        //grab the full url
        var hash = this.href;

        //remove the # value
        hash = hash.replace(/^.*#/, '');

        //clear the selected class and add the class class to the selected link
        $('a[rel=ajax]').removeClass('active');
        $(this).addClass('active');

        //hide the content and show the progress bar
        $("#menu img#logo").attr("src", "ajax/loader.gif");

        //run the ajax
        getPage();
    }); 
});


function pageload(hash) {
    //if hash value exists, run the ajax
    if (hash) getPage();    
}

function getPage() {

    //generate the parameter for the php script
    var data = 'page=' + encodeURIComponent(document.location.hash);
    var page = window.location.hash.substring(1);

    $.ajax({
        url: "ajax/retriever.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  

            //hide the progress bar
            $("#menu img#logo").attr("src", "images/menu_logo.png");    

            //add the content retrieved from ajax and put it in the #content div
            $('#page').html(html);

        }       
    });
}

如何对点击进行操作？如果我点击第1页或在URL中输入＃page1，我希望第1页的内容直接显示。

提前致谢！

Answer 1

通过将变量hash传递给函数并将其用作数据检索器来解决它。

$(document).ready(function () {

    if(window.location.hash == ''){

        document.getElementById('link_hem').click();

    }

    //highlight the selected link
    $('a[href=' + document.location.hash + ']').addClass('active');

    //Seearch for link with REL set to ajax
    $('#menu a').click(function () {

        //grab the full url
        var hash = this.href;

        //remove the # value
        hash = hash.replace(/^.*#/, '');

        //clear the selected class and add the class class to the selected link
        $('a[rel=ajax]').removeClass('active');
        $(this).addClass('active');

        //hide the content and show the progress bar
        $("#menu img#logo").attr("src", "ajax/loader.gif");

        //run the ajax
        getPage(hash);
    }); 
});


function pageload(hash) {
    //if hash value exists, run the ajax
    if (hash) getPage();    
}

function getPage(hash) {

    //generate the parameter for the php script
    var data = 'page=%23' + hash;
    var page = window.location.hash.substring(1);

    $.ajax({
        url: "ajax/retriever.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  

            //hide the progress bar
            $("#menu img#logo").attr("src", "images/menu_logo.png");    

            //add the content retrieved from ajax and put it in the #content div
            $('#page').html(html);

        }       
    });
}

在点击时直接使用AJAX加载制作hashtag网址

1 个答案: