How I get selected menu li on one page active and opened one another page using JQuery

Question

I have a list of item wrapped in UL and I want to make the element selected be active on another page with sub-menu opened if there is any.

   jQuery(document).ready(function(){
    $(window).load(function() {
        $("#task .c-task-menu #menu-task-menu").addClass("task-menu");
        $(".task-menu li.grand-parent > a,.task-menu li .sub-menu li.parent-menu > a").addClass("menu-link");
        $(' .menu-link').click(function(e) {
           e.preventDefault();
         });
        $('.menu-link').each(function(){
            $(this).attr('id','#'+$(this).text().replace(/\s+/g,'_'));

            var parent_menu = $('.task-menu li.grand-parent > a').text().replace(/\s+/g,'_');
            var child_menu = $('.task-menu li .sub-menu li.parent-menu > a').text().replace(/\s+/g,'_');
            $(this).attr("href", "https://mystuff.com/#"+child_menu );

        });
        $('.task-menu li ul').css({'display':'none'});
        $('ul.task-menu li').click(function () {
                $('.sub-menu:visible').add($(this).find('.sub-menu:first')).toggle();
            });   
        $('.student_team_btn').css({'cursor': 'pointer'});
        $('.student_team_btn').click(function(){
            $('.student_team_more').toggle();
            $(this).text() === 'Learn More' ? $(this).text('Show Less') : $(this).text('Learn More');
        });
        $('ul.task-menu li a').click(function() {
          $(this).parent().addClass('active');
          $(this).parent().siblings().removeClass("active");
        });

        // to make the task menu on the homepage clickable
        $('.home li.grand-parent ul.sub-menu li.parent-menu > a').each(function(){
            //$(this).attr("href", "https://mystuff.com/task-menu/");
            //$('.home li.grand-parent').uniqueId();
            //$(this).uniqueId();
            var grand_parent = $('.home li.grand-parent > a').text().replace(/\s+/g,'_');
            var generic = $(this).text().replace(/\s+/g,'_');
            $(this).attr('id',generic);
            $('.home li.grand-parent > a').attr('id', grand_parent);


                });
            $('.home li.grand-parent ul.sub-menu li.parent-menu > a').click(function() {
                var generic = $(this).text().replace(/\s+/g,'_');
                $(this).attr("href", "https://mystuff.com/task-menu/#"+generic);
                alert('my name');
                    $(".task-menu li.grand-parent > a,.task-menu li .sub-menu li.parent-menu > a").trigger('click');
            });
    });
});

The first page:

The code above is to change the url to the url of the task-menu. Below is the picture of the task menu.

I want the selected element be made from the first image, then it will open the task-menu and make link selected and active.

Please, any assistance will be appreciated. Thank you in advance.

As soon as you click on a menu you can store it in a cookie before redirecting and fetch it on the new page after loading dom elements and add class to the specified menu. If you go with the url method it will make the url lil messier. — Rishi, Dec 30 '19 at 06:13

score 1 · Answer 1 · answered Dec 27 '19 at 11:55

1

I would use location.href = 'page2.html?option=' + yourSelectedOption to jump to the other page.

yourSelectedOption could be the ID of the option selected.

Then, at the other page, I would use the function showed in this answer $.urlParam to solve the problem of getting the data sent before.

In this case, I would use $.urlParam('option') to get the option selected before and I would have the same IDs in second page to simply use the jQuery object $('#'+$.urlParam('option')) to do what you please with that option.

answered Dec 27 '19 at 11:55

Javier

881
6
18

please can you demonstrate? I have got the illustration with the ids depicted above. Can you please help out, I am a bit confused. The first page is home page, and I am using general jQuery (myfile.js). i specified each menu with their respective classes and ids for distinction – Payne Dec 27 '19 at 13:08

score 1 · Accepted Answer · answered Dec 31 '19 at 13:44

This might be easy to follow, not tested but I have helped you to restructure the code to make IDs of parents of selected elements appended and searchable from the menu page.

$('.menu-link').each(function(){
           $(this).attr('id',$(this).text().replace(/\s+/g,'_').replace(/,/g , '_'));
            $(this).parent().attr('id',$(this).text().replace(/\s+/g,'_').replace(/,/g , '_'));
        });
         // passing the parameter from the home to the url 
        $.urlParam = function (name) {
                    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
                                      .exec(window.location.search);
                    return (results !== null) ? results[1] || 0 : false;
                }
                //check if the option and child are not empty
                if ($.urlParam('options') !== null){
                    console.log($.urlParam('chils'));
                    $('.task-menu #'+$.urlParam('options')).click();
                    $('#'+$.urlParam('chils')).addClass('active').click();
                  }

        // to make the task menu on the homepage clickable
        $('.home li.grand-parent > h3, .home li.grand-parent ul.sub-menu li.parent-menu > a').each(function(){
            var grand_parent = $(this).text().replace(/\s+/g,'_').replace(/,/g , '_');
                            $(this).parent().attr('id', grand_parent);
                    });

         $('.home li.grand-parent ul.sub-menu li.parent-menu > a').click(function() {
                    var generic = $(this).text().replace(/\s+/g,'_').replace(/,/g , '_');
                     var href = $(this).attr('href').split('/');  
                       var ance = $(this).parent().parent().parent().attr('id');
                       chil = $(this).parent().attr('id'); //
                $(this).attr("href", `https://mystuff.com/task-menu/`+href[4]+'/'+href[5]+'/?options='+ance+'&'+'/?chils='+chil);
                   location.href = `https://mystuff.com/task-menu/`+href[4]+'/'+href[5];
        });

You should find a way to clean your url as much as you only used the parameters to trigger click event on the menu page.

Thank you so much! It works with some minor adjustments – Payne Dec 31 '19 at 19:17 — Payne, Dec 31 '19 at 19:17

How I get selected menu li on one page active and opened one another page using JQuery

2 Answers2