Question

目标

使用Ajax获取页面
使用JS更新窗口网址
使用窗口历史记录保存Ajax页面以进行前后导航而无需重新加载页面
点击和后退点击更改导航栏属性（通过更改班级来设置颜色）。

运作

1,2和3正在运作。

问题+问题

如何使＃4工作？也就是说，当使用后向点击来匹配正在显示的页面时，如何更改导航栏列表项的类属性？

JAVASCRIPT CODE - 使用JQuery

<script>
            $(function(){
                $("a[RAJAX='RAJAX']").click(function(e){
                    e.preventDefault(); 
                    // if comment-uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content; if commented, html5 nonsupported browsers will reload the page to the specified link.

                    //get the link location that was clicked
                    pageurl = $(this).attr('href');
                    clickItem = $("header .navbar #menu-main-menu .dropdown-menu").find($(this)).parent(".menu-item").parent(".dropdown-menu").parent();   //BSR

                    //to get the ajax content and display in div with id 'content'
                    $.ajax({url:pageurl+'?RAJAX=RAJAX',success: function(data){
                        $('#content').html(data);
                    }});

                    //to change the browser URL to 'pageurl'
                    if(pageurl!=window.location){
                        window.history.pushState({path:pageurl},'',pageurl);    
                    }

                    $(".dropdown").removeClass("activate-color");
                    clickItem.addClass("activate-color");

                    return false;  
                });
            });

            /* the below code is to override back button to get the ajax content without reload*/
            $(window).bind('popstate', function() {
                $.ajax({url:location.pathname+'?RAJAX=RAJAX',success: function(data){
                    $('#content').html(data);
                }});
            });
    </script>

HTML代码 - 使用Bootstrap.css

<header>        
        <div class="navbar navbar-default navbar-fixed-top">
            <ul id="menu-main-menu" class="nav navbar-nav">

                <li class="dropdown">
                    <a href="">Nav Bar Item<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link1">Link-1</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link2">Link-2</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link3">Link-3</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="">Nav Bar Item<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link4">Link-4</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link5">Link-5</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link6">Link-6</a></li>
                    </ul>
                </li>

                <li class="dropdown">
                    <a href="">Nav Bar Item<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link7">Link-7</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link8">Link-8</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link9">Link-9</a></li>
                        <li class="menu-item"><a RAJAX='RAJAX' href="http://www.example.com/Link10">Link-10</a></li>
                    </ul>
                </li>


            </ul>
        </div> <!-- end .navbar -->
    </header> <!-- end header -->


    <div class="container body-container">
        <div id="content" class="clearfix row custom-homepage" style="padding:10px;">
            AJAX CONTENT SPACE
        </div>
    </div>

Answer 1

如果要在元素中加载特定的html内容，请使用jquery load http://api.jquery.com/load/

同时查看此库ViaJS https://github.com/abdi0987/ViaJS

AJAX + JS + Window.History - 使用后向导航

1 个答案: