javascript - 使用相同的页面 anchor 击后保持链接事件

标签 javascript jquery html css navbar

基本上我有一个带有相同页面 anchor 的固定导航栏,我想在单击链接并将其带到页面的该部分后保持链接处于事件状态。如果链接到另一个页面,这很简单,但我不知道如何在这里。

这是我得到的。我将只向你们展示第一个链接和部分,因为对于以下链接,解决方案很可能是相同的。我没有编写任何 CSS,因为我不确定如何去做。

<nav id="navbar" class="navbar">
<div id="navContent" class="areaMargin navContent row">
    <a href="#schedWrapper" class="link btn btn-lg btn-primary col-lg-2 col-md-2 col-sm-2  col-xs-12">Scheduling</a>
</div>
</nav>



<section id="schedWrapper" class="bgWrapper ">
<img class="bgImg" src="images/bg/scheduling-bg.jpg">
<article id="schedContent" class="areaMargin fittext">
    <header class="top">
        <div class="col1"><h1>A New Way<br />To Schedule<br />Everything</h1></div>
        <div class="col2"><img src="images/scheduling-client-group-event.png"></div>
    </header>
    <div class="clearfix"></div>
    <div id="schedBottom">
        <p>One calendar that lets you manage schedules for your team<br />
        and your spots, all in one calendar, with options of sharing your<br />
        own personal schedule, and you can accept and decline<br />
        appointments with any device.</p>
    </div>
</article>

最佳答案

使用 jQuery,您可以简单地切换链接上的 active 类:

$('#navContent a').click(function(){
   /* remove class from prior active link*/
   $('.activeLinkClass').removeClass('activeLinkClass');
   /* "this" is current link clicked*/
   $(this).addClass('activeLinkClass');
});

关于javascript - 使用相同的页面 anchor 击后保持链接事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20767161/

相关文章:

jQuery - 当元素位置改变时鼠标输入

javascript - 需要重新加载我的页面才能使用 Rails 查看某些元素

javascript - jQuery/Bootstrap 跟随带有悬停项的 div

c# - 如何取消选择列表框中的单个项目

javascript - querySelector 不适用于 puppeteer 中的子元素

jquery - 选择的 jQuery 小部件在 IE8 的兼容性 View 中不起作用

.net - 以渐进格式保存 JPG

html - Mac Chrome 上的字体 DinPro-Light 问题

javascript - AngularJS 无法从 NodeJS 服务器读取响应 HTTP header

javascript - apollo 服务器突变中无法使用 console.log() 函数