Question

My client has requested that I include sectional page navigation, which the code below answers. If the user triggers an internal page link, or uses the sectional navigation (.menu) the state of the sectional navigation changes to class .active and then takes the user to their section of choice. It might not be pretty but it is simple and it works.

The difficulty comes when the user selects a link to a specific section on another page.

I can't work out how to set the relevant sectional navigation on the new page to class .active.

I'm thinking that during the onload I need to strip out the #newsection from the page href and then run a similar query as that illustrated?

I'm looking for guidance as to the best method of achieving my aims or even to a better approach.

Any takers?

I'm using jQuery and the site is a mixture of html and .aspx pages.

Thanks.

    $(document).ready(function () {

function scrollitanchors(target) {

    if (target != "") {
        var stop = $(target).offset().top;
        var delay = 900;
        $('body,html').animate({ scrollTop: stop }, delay);
        return false;
    }
}

$('.scrollit').on('click', function (e) {
    e.preventDefault();
    var target = $(this).attr('href');

    $('.menu li a').each(function () {
        $(this).removeClass('active');
    });

    $('.menu li a').each(function () {

        if ($(this).attr('href') == target) {
            $(this).addClass('active');
        }
    });
    scrollitanchors(target);
}); //eo function

}); // e.o doc ready

Answer 1

You can add a string to the hash of url for the second page.

ie:

<a href="/other/page#section>Link Text</a>

and on the second page:

<a id="section">Link Text</a>

Then when you load the new page, check the hash.

$(document).ready(function(){
   // Get the hash from the url
   var section = window.location.hash;
   // Check if the element with the id in the hash exists and add the active class
   if ($("#" + hash).length) $("#" + hash).addClass('active');
   // Clean up the url
   window.location.hash = '';
});

I'm not 100% clear of what you're asking, but this will allow you to communicate a link ID between pages.

jQuery Page Navigation - setting an active class on a section within a new page

1 个答案: