Question

我在一个页面中创建了动态链接列表...

当在该动态列表上的一个链接上完成单击时，我想向用户显示该链接处于活动状态，因此我将向所单击的链接添加一个类，但在刷新页面时突然删除该新类。

我希望保留该课程，直到用户点击另一个链接。我怎样才能实现？

我的代码如下：

<style>
.activearea {
     background: #3f7aa5 !important;
}
</style>

<script>
$(document).ready(function() {
    $('a.areamenu').click(function(){
        $('a.areamenu').removeClass("activearea");
        $(this).addClass("activearea");
     });
});
</script>

这是我的动态链接

<li>
    <a class="areamenu" href="/areas/'.$categorynameNavLink.'/'.$subcatnameNAV.'/'.$subcatid.'/">'.$subcatname.'</a>
</li>

Answer 1

通过AJAX更改类仅在本地存储信息。因此，每当您刷新页面时，此数据都会丢失。

要解决此问题，您可以通过设置Cookie来让您的页面记住这一点。

Answer 2

尝试使用localstorage()之类的，

$(function(){
    // if localstorage activeArea is set then add activearea class to menu
    if(localStorage && localStorage.getItem('activeArea')==1){
       $('a.areamenu').addClass("activearea");
    } 
    $('a.areamenu').click(function(){
       $('a.areamenu').removeClass("activearea");
       $(this).addClass("activearea");
       localStorage.setItem('activeArea',1);// set value in localstorage
    });
});

Answer 3

尝试使用PHP脚本，如下所示，

假设页面URl类似于：http://example.com/areas/categorynameNavLink/subcatnameNAV/123

<?php
$CatSelectID =  end(explode('/',curPageURL()));
?>

<li>
<a <?php if($subcatid == $CatSelectID) echo 'class="areamenu"';?> href="/areas/'.$categorynameNavLink.'/'.$subcatnameNAV.'/'.$subcatid.'/">'.$subcatname.'
</a>
</li>

<?php
function curPageURL() {
 $pageURL = 'http';
 if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
 $pageURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $pageURL;
}
?>

注意：未经测试

Answer 4

在点击功能中使用e.preventDefault（）

刷新页面时删除当前类

4 个答案: