Fatal编程技术网
  • jquery/
  • Jquery 进入新页面时，保持展开菜单打开

Jquery 进入新页面时，保持展开菜单打开

jquery html

Jquery 进入新页面时，保持展开菜单打开,jquery,html,accordion,Jquery,Html,Accordion,我已经创建了一个简单的手风琴菜单（有点），我遇到的第一个问题是，当我进入一个页面时，我想让相应的锚激活，我已经用脚本解决了它，但另一个问题是，当我从一个扩展菜单进入另一个页面时，我想在我到达打开的页面时打开扩展菜单。我试过很多方法，但都不管用 jsfiddle： HTML 在母版页上使用以下jQuery： $(document).ready(function(){ var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)

我已经创建了一个简单的手风琴菜单（有点），我遇到的第一个问题是，当我进入一个页面时，我想让相应的锚激活，我已经用脚本解决了它，但另一个问题是，当我从一个扩展菜单进入另一个页面时，我想在我到达打开的页面时打开扩展菜单。我试过很多方法，但都不管用

jsfiddle：

HTML

在母版页上使用以下jQuery：

$(document).ready(function(){
    var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/, "$1");

        $('#menu li').removeClass("active");
        $("#submenu ul").hide();

        ///// Apply active class to selected page link
        $('#menu li a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
            {

                  $(this).closest('li').closest('li').addClass('active');
                  if($(this).parent().closest('li').attr('class') == 'submenu')  
                      $("#submenu ul").show();

             }
        });

});
下面是一个AJAX解决方案，它将帮助您在调用各种页面时保持导航状态：

粗略的HTML标记：

<body>
    <ul id="menu">
        <li><a href="index.html">index</a></li>
        <li><a href="forum.html">forum</a></li>
        <li id="submenu"><span class="s_act">links</span>
            <ul>
                <li><a href="index1.html">index</a></li>
                <li><a href="index2.html">index</a></li>
            </ul>
        </li>
    </ul>
    <div id="content">
      <!--Page Content Goes Here-->
    </div>
</body>
你有一个共同的母版页，还是你在每一页上重复你的导航？那是一个.NET Web表单母版页吗？我不知道太多，我只是一个网页设计师，只知道html，css的东西..不用担心，我只是想知道你需要做的是通过AJAX加载你的html页面。您所经历的是网站是无状态的。我用您的脚本替换了我的整个脚本，它可以工作，但在主页中删除了活动类，并且菜单在主页中展开，我只希望在单击它或单击它下面的子菜单时展开。是的，这是预期的，因为主页链接位于级别l。检查此编辑的答案。菜单在主页中仍处于展开状态，只有在单击或其下的子页面打开时才应激活它。您使用哪个css类来展开菜单？我使用。单击（）函数在页面上展开子菜单。在页面加载时，它被.hide（）函数隐藏，请参阅第一篇文章中的脚本。我尝试了这个，我无法导航到子页面，当我在该页面时，它也不会使主页链接处于活动状态。 
$(document).ready(function(){
    var pageTitle = window.location.pathname.replace(/^.*\/([^/]*)/, "$1");

        $('#menu li').removeClass("active");
        $("#submenu ul").hide();

        ///// Apply active class to selected page link
        $('#menu li a').each(function () {

            if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
            {

                  $(this).closest('li').closest('li').addClass('active');
                  if($(this).parent().closest('li').attr('class') == 'submenu')  
                      $("#submenu ul").show();

             }
        });

});

<body>
    <ul id="menu">
        <li><a href="index.html">index</a></li>
        <li><a href="forum.html">forum</a></li>
        <li id="submenu"><span class="s_act">links</span>
            <ul>
                <li><a href="index1.html">index</a></li>
                <li><a href="index2.html">index</a></li>
            </ul>
        </li>
    </ul>
    <div id="content">
      <!--Page Content Goes Here-->
    </div>
</body>

$(document).ready(function(){
    $("#submenu ul").hide();
    $("#submenu").click(function () {
        $("span.s_act").addClass("submenu_act");
        $("#submenu ul").show();
     });
     $("#submenu ul li a").click(function(e){
         e.preventDefault();
         var page = $(this).attr('href');
         $.get(page, function(html){
            $('#content').html(html);
         });
     });
});