我如何在一个页面上激活选定的菜单 li 并使用 JQuery 打开另一个页面

Question

我有一个包含在 UL 中的项目列表，我想让所选元素在另一个页面上处于活动状态，并打开子菜单（如果有的话）。

   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');
            });
    });
});

第一页：

上面的代码是将任务菜单的url改为url。下面是任务菜单的图片。

我希望所选元素由第一张图片组成，然后它将打开任务菜单并使 link 处于选中状态并处于活动状态。

如有任何帮助，我们将不胜感激。先感谢您。

Answer 1

我会用location.href = 'page2.html?option=' + yourSelectedOption跳转到另一页。

yourSelectedOption可能是所选选项的ID。

然后，在另一个页面，我会使用这个答案$.urlParam中显示的功能来解决之前获取发送数据的问题。

在这种情况下，我会使用 $.urlParam('option') 来获取之前选择的选项，并且我会在第二页中使用相同的 ID 来简单地使用 jQuery 对象 $('#'+$.urlParam('option')) 来完成你喜欢那个选项。

Answer 2

这可能很容易理解，未经测试，但我已帮助您重构代码，使所选元素的父元素的 ID 附加并可从菜单页面搜索。

$('.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];
        });

你应该找到一种方法来清理你的 url ，因为你只使用参数来触发菜单页面上的点击事件。

我如何在一个页面上激活选定的菜单 li 并使用 JQuery 打开另一个页面

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

html

wordpress

jquery

menu