[英]i am struggling to add active class to my navigation menus with ajax
我在我的网站上使用ajax来动态加载页面并向URL添加哈希以保留历史记录和浏览器后退按钮,为此,我使用基于html5 history api
jquery bbq
插件,我不得不说一切正常,除了一个问题这是当前链接的活动类 。
我有两个导航主菜单 ,仅位于主页上,第二个包含在每个页面上,其中包含php include
函数及其主菜单的子导航类型。
正如我所说,我的问题是如何向单击的任何链接中添加活动类,以便使其外观不同于其他用户,用户应该知道他们现在的位置!
我尝试了不同的技术,但这些技术仅适用于main menu
,而secondary nav
存在某种问题,以便更好地理解,请观看此视频
正如您在视频中看到的那样,它在main menu
上运行良好,但是仅在单击任意链接一次后才将类添加到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' );
});
谢谢你的帮助!
我在使用新浏览器时遇到问题,发现了这个问题,我认为唯一可以正常使用的插件: jquery地址和文档在这里: 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');
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.