JQuery更新页面上的内容,但也需要更新URL

时间:2014-09-22 06:55:47

标签: javascript php jquery html css

我的子导航使用JQuery简单地将新的.php文档加载到特定的<div>中,因此看起来页面内容发生了变化,但仍保留相同的标题和主菜单。

我的问题:我希望能够实际使URL看起来更改为已加载的.php文档的网址。现在,URL仍然是加载子导航的主.PHP页面。

HTML MENU:

      <ul class="hiw_menu">
          <li class="howitworks <?php if($page_name == 'how_it_works') { echo 'active'; } ?>"><a href="how-it-works.php">HOW IT WORKS</a></li>
          <li class="methodology <?php if($page_name == 'methodology') { echo 'active'; } ?>"><a href="themethodology.php">THE METHODOLOGY</a></li>
          <li class="community <?php if($page_name == 'community') { echo 'active'; } ?>"><a href="thecommunity.php">THE COMMUNITY</a></li>
          <li class="tools <?php if($page_name == 'the_tools') { echo 'active'; } ?>"><a href="thetools.php">THE TOOLS</a></li>
      </ul>

我的JQuery由上面的子导航器激活:

 $('.hiw_menu li').on("click", function(e) {
        e.preventDefault();
        $('.hiw_menu li').removeClass('active');
        $(this).addClass('active');

        $( "#pageheader_cont .pageheader_top" ).load( $(this).find('a').attr('href') + " #pageheader_cont .container .pageheader_top .pageheader_top_inside" );

        $( ".hiw_content_cont" ).load( $(this).find('a').attr('href') + " .hiw_content_cont_inside",  


 //THIS FUNCTION SWITCHES OUT CONTENT IN ANOTHER SECTION OF THE PAGE
            function( response, status, xhr ) {

                $('.core_values_cont ul li').click(function() {
                    $('.core_values_cont ul li.active .core_img img').attr('src', $('.core_values_cont ul li.active .core_img img').attr('src').replace('_active.png','.png') );
                    $('.core_values_cont ul li').removeClass('active');
                    $(this).addClass('active');

                    //$('.core_values_cont ul li .core_img img').attr('src', $('.core_values_cont ul li .core_img img').attr('src').replace('_active.png','.png') );
                    $(this).find('.core_img img').attr('src', $(this).find('.core_img img').attr('src').replace('.png','_active.png') );

                    $('.core_values_box').css('display','none');
                    $('.method_box').css('display','none');
                    $( '#' + $(this).attr('title') + '_cont' ).css('display','block');
                });

            }

        );

 //THIS SCROLLS PAGE TO HIDE THE TOP OF THE PAGE AND FOCUS ON SUB-NAV   
        $('html, body').animate({
            scrollTop: $("#pageheader_cont").offset().top
        }, 400);


    });

0 个答案:

没有答案