Question

我目前正在为客户构建应用程序，并遇到了一个问题。我目前正在使用脚本从当前文件本身的另一个文件加载内容，但是当我刷新时内容不会保持存在，当我来回切换时它也不会保存。这是代码：

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#accordionWrapper a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.jsp #content';
        $('#content').load(toLoad);
    }                                           
});

$('#accordionWrapper a').live('click', function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide('fast',loadContent);
    $('#load').remove();
    $('#bodyWrapper').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
    function loadContent() {
        $('#content').load(toLoad,'',showNewContent());
    }
    function showNewContent() {
        $('#content').show('normal',hideLoader());
    }
    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

});

我正在附加我的其他js文件，以防可能发生冲突：

// Accordion Menu Function
$(document).ready(function() {
//ACCORDION BUTTON ACTION   
$('a.accordionButton').live('click', function() {
    // Closes the current open ul.
    $('ul.accordionContent').slideUp('normal'); 
    // opens the selected link's ul.
    $(this).next().slideDown('normal');
    // removes the active class from all links.
    $('a.accordionButton').each(function(){
        $(this).removeClass('selected');
    });
    // adds the active class to the selected link.
    $(this).addClass('selected');
});

//ACCORDION BUTTON HOVER EFFECT
$(".accordionButton").hover(
        function () {
            $("span", this).stop().animate({ paddingRight: "30px" }, 200);
        }, 
        function () {
            $("span", this).stop().animate({ paddingRight: "0px" });
        }
    );

//SIDEBAR MENU HIDE TOGGLE
$('.hideSideBar').live('click', function() {
      $('#sidebar').toggle("slide", function() {
      });
});

$('.showSideBar').click(function() {
    $('#sidebar').toggle('slide', function() {
    });
});

//HIDE THE DIVS ON PAGE LOAD    
$("div.accordionContent").hide();
});


//REFRESH PAGE FIX
function getCurrentPage() {
//Defines the Path Variable to be the url's # tag
var path = window.location.hash;
//Tries every a class named accordionButton
$('a.accordionButton').each(function(){
    //Loops whether the path is equal to the attributes id tag
    if ( path == $(this).attr('id') ) {
        //Adds class 'selected' to matching element.
        $(this).addClass('selected');
        //Opens the selected link's ul.
        $(this).next().slideDown('normal');
        /*
        //Tries every a within an li child of accordionContent.
        $('.accordionContent li a').each(function(){
            //Loops to find an element that's id equals the path variable.
            if ( path == $(this).attr('id') ) {
                //Adds class 'active' to matching element.
                $(this).addClass('active');
            }
        }); 
        */
    }
});

}

最后是html：

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script type="text/javascript" src="js/contentLoader.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.js"></script>
<script type="text/javascript" src="js/accordionMenu.js"></script>
<link type="text/css" rel="stylesheet" href="css/accordionMenu.css" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body onload="getCurrentPage()">
<div id="bodyWrapper">
<div class="showSideBar" style="display:none;">Show Navigation [+]</div>
<div id="sidebar">
    <a class="logo" href="dashboard.jsp"></a>
    <div id="loginWelcome">
        <span>Welcome back</span>
        <span class="username">John Doe</span>
        <span class="logout"><a href="">Logout</a></span>
    </div>
    <div id="accordionWrapper"> 
        <a class="accordionButton" href="dashboard.jsp" id="#dashboar"><span>Dashboard</span></a>
            <ul class="accordionContent">
                <li><a href="dashboard.jsp" class="active">Edit My Profile</a></li>
            </ul>
        <a class="accordionButton" href="workorders.jsp" id="#workorder"><span>Work Orders</span></a>
            <ul class="accordionContent">
                <li><a href="">Create New Work Order</a></li>
                <li><a href="workorders.jsp" class="active">Manage Work Orders</a></li>
            </ul>
        <a class="accordionButton" href="workitems.jsp" id="#workitem"><span>Work Items</span></a>
            <ul class="accordionContent">
                <li><a href="">Create New Work Item</a></li>
                <li><a href="workitems.jsp" class="active">Manage Work Items</a></li>
            </ul>
        <a class="accordionButton" href="users.jsp" id="#user"><span>Users</span></a>
            <ul class="accordionContent">
                <li><a href="">Add New User</a></li>
                <li><a href="users.jsp" class="active">Manage Users</a></li>
            </ul>
        <a class="accordionButton" href="airplanes.jsp" id="#airplane"><span>Airplanes</span></a>
            <ul class="accordionContent">
                <li><a href="">Add New Airplane</a></li>
                <li><a href="airplanes.jsp" class="active">Manage Airplanes</a></li>
            </ul>
        <a class="accordionButton" href="support.jsp" id="#suppor"><span>Support</span></a>
    </div>  
    <a class="hideSideBar" href="#">Hide Navigation [-]</a>
</div>
<div id="contentWrapper">
    <div id="content">

    </div>
</div>

Answer 1

那么你想要发生的事情就是加载内容即使在页面重新加载后也能保持可见状态？

如果是这种情况，则必须使用cookie（或某种存储系统）来跟踪自动态加载内容以来最后加载的内容

Jquery / Ajax内容加载刷新问题

1 个答案: