使用 jQuery 选择特定 href 的锚标记

Question

目的

刷新浏览器后，我希望用户停留在刷新前的菜单/内容中。

问题

刷新浏览器后，用户刷新前所在的特定菜单的内容显示为活动的（即显示在屏幕上）。 但是，该特定内容的菜单图标不会显示为活动的（即它不会显示为黑色）。

我正在努力选择当前 href （用户在刷新之前所在的那个，刷新后相同）的锚元素（找到图标的位置） 。

尝试

 $(document).ready(function() { $('a[class^=menu]').click(function() { $('a[class^=menu]').removeClass('active'); $('div[class^=content]').removeClass('active'); if($(this).hasClass('menu-1')) { $('.menu-1').addClass('active'); $('.content-1').addClass('active'); } if($(this).hasClass('menu-2')) { $('.menu-2').addClass('active'); $('.content-2').addClass('active'); } if($(this).hasClass('menu-3')) { $('.menu-3').addClass('active'); $('.content-3').addClass('active'); } }); if (window.location.hash.substr(1) != '') { $('a[class^=menu],div[class^=content]').removeClass('active'); // making the content active $('#' + window.location.hash.substr(1)).addClass('active'); // making the menu active $('a[href="' + window.location.hash.substr(1) + '"]').addClass("active"); } });

 .container { margin: 0 auto; background-color: #eee; border: 1px solid lightgrey; width: 20vw; height: 90vh; font-family: sans-serif; position: relative; } header { background-color: lightgreen; padding: 5px; text-align: center; text-transform: uppercase; } .bottom-navbar { position: absolute; bottom: 0; width: 100%; padding: 6px 0; overflow: hidden; background-color: lightgreen; border-top: 1px solid var(--color-grey-dark-3); z-index: 50; display: flex; justify-content: space-between; } .bottom-navbar>a { display: block; color: green; text-align: center; text-decoration: none; font-size: 20px; padding: 0 10px; } .bottom-navbar>a.active { color: black; } .menu-1.active, .menu-2.active, .menu-3.active { color: black; } .content-1, .content-2, .content-3 { display: none; } .content-1.active, .content-2.active, .content-3.active { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="container"> <header>My header</header> <div class="main-content"> <div class="content-1 active" id="firstPage">House content</div> <div class="content-2" id="secondPage">Map content</div> <div class="content-3" id="thirdPage">Explore content</div> <div class="bottom-navbar"> <a href="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a> <a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a> <a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a> </div> </div> </div>

感谢您的帮助和建议。

Answer 1

您遇到的问题是您正在寻找错误的href 。

你试图找到a[href="secondPage"]但它应该是a[href="mywebsite#secondPage"]

我还改变了您选择课程并将它们添加为活动的方式。 这种方式更有活力。

注意：在 JS 文件中，有一个名为hash的变量，现在它指向#secondPage以假装我们在第二页，您可以更改该值，重新运行它，它将选择一个新的活动项. 你只需要将hash替换为window.location.hash ，我也将它取出到一个变量中，这样你就不会每次都调用它。

 // just replace this with "window.location.hash" const hash = "#secondPage"; $(document).ready(function() { $('a[class^=menu]').click(function() { // we remove the active classes. $('a[class^=menu]').removeClass('active'); $('div[class^=content]').removeClass('active'); // we get the item that was clicked and select the item // in a dynamic way. const clickedClass = $(this).attr('class'); const [identifier, number] = clickedClass.split('-') $(`.${clickedClass}`).addClass('active'); $(`.content-${number}`).addClass('active'); }); const active = hash.substr(1); if (active != '') { $('a[class^=menu],div[class^=content]').removeClass('active'); // making the content active $(`#${active}`).addClass('active'); // making the menu active $(`a[href="mywebsite#${active}"]`).addClass("active") } });

 .container { margin: 0 auto; background-color: #eee; border: 1px solid lightgrey; width: 20vw; height: 90vh; font-family: sans-serif; position: relative; } header { background-color: lightgreen; padding: 5px; text-align: center; text-transform: uppercase; } .bottom-navbar { position: absolute; bottom: 0; width: 100%; padding: 6px 0; overflow: hidden; background-color: lightgreen; border-top: 1px solid var(--color-grey-dark-3); z-index: 50; display: flex; justify-content: space-between; } .bottom-navbar>a { display: block; color: green; text-align: center; text-decoration: none; font-size: 20px; padding: 0 10px; } .bottom-navbar>a.active { color: black; } .menu-1.active, .menu-2.active, .menu-3.active { color: black; } .content-1, .content-2, .content-3 { display: none; } .content-1.active, .content-2.active, .content-3.active { display: block; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <div class="container"> <header>My header</header> <div class="main-content"> <div class="content-1 active" id="firstPage">House content</div> <div class="content-2" id="secondPage">Map content</div> <div class="content-3" id="thirdPage">Explore content</div> <div class="bottom-navbar"> <a href="mywebsite#firstPage" class="menu-1 active"><i class="fa fa-home"></i></a> <a href="mywebsite#secondPage" class="menu-2"><i class="fa fa-map"></i></a> <a href="mywebsite#thirdPage" class="menu-3"><i class="fa fa-search"></i></a> </div> </div> </div>

Answer 2

这听起来像您想向导航添加一个类，如果它与当前页面的 url 相同？

如果你想在客户端做这样的事情就行了。 这也可以由服务器处理（php/c#）

$(function(){
    var current = location.pathname;
    $('#nav li a').each(function(){
        var $this = $(this);
        // if the current path is like this link, make it active
        if($this.attr('href').indexOf(current) !== -1){
            $this.addClass('active');
        }
    })
})

类似的线程/问题 - 来自 Rob M 的 anwser Add Active Navigation Class Based on URL