Jquery添加類並保持頁面重新加載

我有一個簡單的導航菜單。首頁鏈接有一個下拉活動類。我需要這樣做：當用戶按例如文章鏈接，jquery必須從主頁中刪除下拉活動類，並將此類設置爲選定的鏈接。我知道我可以使用removeClass和addClass，但是當頁面重新加載時，我需要保持選定的鏈接類。我聽說有關餅乾和本地存儲設置課程，但我不知道如何。有人能幫我嗎？Jquery添加類並保持頁面重新加載

<ul> 
    <li class="dropdown active"><a>Home</a></li> 
    <li class="dropdown"><a>Articles</a></li> 
    <li class="dropdown"><a>About</a></li> 
    </ul>

來源

2015-01-10 anhelo

請按菜單名稱 –

我認爲，一個簡單的解決辦法是從服務器端設置類提供你的'href'鏈接。什麼是您使用的服務器端語言？你在使用框架嗎？如果是這樣，你可以使用模板引擎來實現這一點，並避免演示文稿和「邏輯」之間的耦合。 –

檢查我的答案.. –

可以以這種方式使用jQuery使用：

$(document).ready(function(){ 
     if($(".dropdown a").attr("href")==window.location.href){ 
      $(".dropdown").attr("class","dropdown active"); 
     } 
     else{ 
      $(".dropdown").attr("class","dropdown"); 
     } 
    });

來源

2015-01-10 14:21:32

當我打開網站時，所有鏈接都會下載活動類，當我點擊其他鏈接時，下拉活動類會重置。我的href是這樣的：http：// localhost/thoughts/quotes，http：// localhost/interesting/articles等:) – anhelo

然後添加'$（「。dropdown」）。attr（「class」，「dropdown 「）;'這個代碼變成else。 –

@anhelo檢查我的更新。 –

只是爲了任何犯錯檢查一次，這應該解決您的問題。

<ul class="nav"> 
    <li class="dropdown active"><a>Home</a></li> 
    <li class="dropdown"><a>Articles</a></li> 
    <li class="dropdown"><a>About</a></li> 
    </ul> 

$('.nav li').click(function(){ 
     $('.navt li').removeClass('active'); 
     $(this).addClass('active'); 
});

，或者使用的cookie（理想不是非常好的選擇）

set_page.php

的setcookie（ '導航'， '放-的麗類名，在這裏'，時間（），'/'）;

receive_page.php

$ getnav = $ _COOKIE [ 'NAV'];

變種變量1 = //這裏得到的PHP VAL;

$(document).ready(function(){ 
    $('.navt li').removeClass('active'); 
     $('.'+variable1).addClass('active');

}）;

來源

2015-01-10 14:31:07

點擊鏈接時頁面重新加載必須保持下拉活動類，所以這個代碼是不正確的，我認爲。 :) – anhelo

我使用CI框架。這不是一個簡單的方法來宣傳這些代碼。如果cookie不是好的存儲方式，那麼最好的方法是什麼？ – anhelo

我會建議使用URL參數 –

-1

這應該有所幫助。加入.each @Ahosan Karim Asik解決方案。

$(document).ready(function(){   
    $(".dropdown a").each(function(){    
     if($(".dropdown a").attr("href")==window.location.href){ 
      $(".dropdown").attr("class","dropdown active"); 
     } 
     else{ 
      $(".dropdown").attr("class","dropdown"); 
     } 
    }); 
});

來源

2016-01-22 23:04:49 Wanderer

我可以在一個簡單的HTML網站上得到這個工作。

下面的函數將檢查用戶或訪問者正在查看的頁面URL，並與菜單項上的頁面進行比較。如果它們匹配，它會將.active類添加到該菜單項。

考慮自己的HTML結構中，請嘗試以下操作：

// Navigation Markup, let's add an id for easy targeting. 

<ul id="nav"> 
    <li class="dropdown"><a>Home</a></li> 
    <li class="dropdown"><a>Articles</a></li> 
    <li class="dropdown"><a>About</a></li> 
</ul>

// The JS 

    jQuery(function() { 
    var pgurl = window.location.href.substr(window.location.href 
     .lastIndexOf("/")+1); 
    jQuery("#nav ul li a").each(function(){ 
     if(jQuery(this).attr("href") == pgurl || jQuery(this).attr("href") == '') 
     jQuery(this).addClass("active"); 
    }) 
    });

注：此功能瞄準<ul>列表中的<a>元素。爲了定位<li>元素，請稍微更改該功能。

來源

2016-12-20 20:37:11

什麼工作對我來說：

<nav class="nav"> 
    <a class="nav-link" href="/">Блог</a> 
    <a class="nav-link" href="/loler">Об авторе</a> 
</nav>

$(document).ready(function() { 
    const regex = /http:\/\/.*\/(.*)\//g; 
    const match = regex.exec(window.location.href); 
    // iterate over all and find match 
    if (match) { 
     $(".nav-link").each(function() { 
      if ($(this).attr("href").slice(1) == match[1]) { 
       $(this).addClass("active"); 
      } 
     }); 
    } 
    // set active first element 
    else { 
     $(".nav-link:first").addClass("active"); 
    } 
});

來源

2017-09-23 15:40:13 Alexey

Jquery添加類並保持頁面重新加載

回答

相關問題