javascript - 我正在努力使用 ajax 将事件类添加到我的导航菜单中

Question

我在我的网站上使用 ajax 来动态加载页面并向 url 添加哈希值以保留历史记录和浏览器后退按钮，为此我使用了基于 html5 的 jquery bbq 插件history api，我不得不说除了一个问题之外一切正常，那就是当前链接的事件类。

我有两个导航主菜单，它只在主页上，第二个包含在每个页面上，具有 php include 功能及其主菜单的子导航.

正如我所说，我的问题是如何将事件类添加到任何被点击的链接，使其看起来与其他链接不同，用户应该知道他们现在在哪里!

我尝试了不同的技术，但那些只适用于 main menu 和 secondary nav 的一些问题为了更好地理解请看这个 video

正如您在视频中看到的那样，它在 主菜单 上运行良好，但仅在单击任何链接一次后将类添加到 secondary menu 然后单击另一个链接，然后单击返回原始链接，此外，当我刷新它时，它会删除事件类。

这是我的代码。

主菜单

<div id="vertical-menu">
    <!--<h2 class="logo">LOGO</h2>-->
    <div class="logo">
        <span class="arcd-male97"></span> 
        <h2 class="logo-name">AMR</h2>
        <h6 class="logo-desc">ARCADE MUSIC REPOSITORY</h6>
    </div>

    <nav>
        <ul id='menu' class="menu-items">
            <li><a href="#Browse/Browse_Page0.php"><i class="arcd-archive"></i></br>Browse</a></li>
            <li><a href="#Top_albums/Top_albums_Page0.php"><i class="arcd-music97"></i></br>Top albums</a></li>
            <li><a href="#Top_artists/Top_artists_Page0.php" ><i class="arcd-microphone52"></i></br>Top artists</a></li>
            <li><a href="#Top_lists/Top_lists_Page0.php" ><i class="arcd-numbered8"></i></br>Top lists</a></li>
            <li><a href="#Charts/Charts_Page0.php" ><i class="arcd-rising9"></i></br>Charts</a></li>
        </ul>
    </nav>
</div>

二级导航栏

<div class="header_container" id="header_container"> <!--start header div-->
    <div id="header_titles">
        <h1 class="browse-heading">BROWSE</h1>
        <h2 class="browse-subheading">GENRES & MOODS</h2>
    </div> 
</div> <!--end header div-->  

<div id="tabnav_container"> <!--start tabnav_container-->
    <div class="navtab_background"></div>
    <nav>
        <ul id="tabnav">
            <li class="pop_tab"><a href="#Browse/Browse_Page1.php"><i class="arcd-microphone352"></i>pop</a></li>
            <li class="country_tab"><a href="#Browse/Browse_Page2.php"><i class="arcd-guitarcountry"></i>country</a></li>
            <li class="rock_tab"><a href="#Browse/Browse_Page3.php"><i class="arcd-electricclone"></i>rock</a></li>
            <li class="blues_tab"><a href="#Browse/Browse_Page4.php"><i class="arcd-harmonicblues"></i>blues</a></li>
            <li class="edm_tab"><a href="#Browse/Browse_Page5.php"><i class="arcd-disc62edm"></i>edm</a></li>
            <li class="jazz_tab"><a href="#Browse/Browse_Page6.php"><i class="arcd-trumpet12jazz"></i>jazz</a></li>
            <li class="rnb_tab"><a href="#Browse/Browse_Page7.php"><i class="arcd-mic102"></i>r&b</a></li>
            <li class="hip-hop_tab"><a href="#Browse/Browse_Page8.php"><i class="arcd-musicplayer1hiphop"></i>hip hop</a></li>
            <li class="reggae_tab"><a href="#Browse/Browse_Page9.php"><i class="arcd-mic102"></i>reggae</a></li>
            <li class="classical_tab"><a href="#Browse/Browse_Page10.php"><i class="arcd-violin62classical"></i>classical</a></li>
            <li class="folk_tab"><a href="#Browse/Browse_Page11.php"><i class="arcd-guitar92folk"></i>folk</a></li>
            <li class="soul_tab"><a href="#Browse/Browse_Page12.php"><i class="arcd-mic102"></i>soul</a></li>
        </ul>
    </nav>
</div><!--end tabnav_container-->

这是ajax脚本

$(function() { 
    // Keep a mapping of url-to-container for caching purposes.
    var cache = {
        // If url is '' (no fragment), display this div's content.
        '': $('#default-homepage-contents')
    };

    // Bind an event to window.onhashchange that, when the history state changes,
    // gets the url from the hash and displays either our cached content or fetches
    // new content to be displayed.
    $(window).bind( 'hashchange', function(e) {

        // Get the hash (fragment) as a string, with any leading # removed. Note that
        // in jQuery 1.4, you should use e.fragment instead of $.param.fragment().
        var url = $.param.fragment();

        // Hide any visible ajax content.
        $( '#main-container' ).children( ':visible' ).hide();

        if ( cache[ url ] ) {
            // Since the element is already in the cache, it doesn't need to be
            // created, so instead of creating it again, let's just show it!
            cache[ url ].fadeIn(1000);

        } else {
            // Show "loading" content while AJAX content loads.
            $( '#loading' ).delay(500).show();

            // Create container for this url's content and store a reference to it in
            // the cache.
            cache[ url ] = $( '<div class="bbq-item"/>' )

            // Append the content container to the parent container.
            .appendTo( '#main-container' )

            // Load external content via AJAX. Note that in order to keep this
            // example streamlined, only the content in .infobox is shown. You'll
            // want to change this based on your needs.
            .load( url, function() {
                // Content loaded, hide "loading" content.
                $( '#loading' ).fadeOut(1000);
            });
        }
    })

    // Since the event is only triggered when the hash changes, we need to trigger
    // the event now, to handle the hash the page may have loaded with.
    $(window).trigger( 'hashchange' );
});

感谢您的帮助!

Answer 1

我在使用新浏览器时遇到问题并发现了这个，我认为唯一正确工作的插件:jquery address和文档在这里:http://www.asual.com/jquery/address/docs/#api-reference示例用法是

$(function() {
    //push it to history
    $('#tabnav > li').click(function(e) {
        e.preventDefault();
        $.address.parameter("browse", $(this).attr("href"), false);
    });

    //catch changes
    $.address.change(function () {
        $.each($.address.parameterNames(), function (index, value) {
            url = $.address.parameter(value);
            $('a[href="'+url+'"]').addClass('active');
        });
    });
});