簡體   English   中英

使用相同的頁面錨點單擊后保持鏈接處於活動狀態

[英]keep link active after clicked using same page anchors

基本上,我有一個固定的導航欄,具有相同的頁面錨點,在單擊鏈接並轉到頁面的該部分后,我想保持鏈接的活動狀態。 如果鏈接到另一個頁面,這很簡單,但是我不知道如何轉到這里。

這就是我所擁有的。 我只向大家展示第一個鏈接和這一部分,因為以下鏈接的解決方案很可能是相同的。 我沒有寫任何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');
});

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM