Javascript 关于css的Jquery问题

我正在使用jQuery函数在单击li标记时添加一个类。问题是这个类被添加了一会儿，然后消失了。也许，因为我正在joomla中工作，在我的jquery函数之后还有另一个jquery函数或另一个php脚本修改li标记

这是我的网站，若你们点击左边的菜单，你们可以看到背景色在瞬间出现，然后消失

这是我的jQuery：

jQuery( document ).ready(function() {
jQuery(".art-block li").click(function(){
jQuery(".selected").removeClass("selected");
jQuery(this).addClass("selected");
 });

和css：

.selected{

background-color:red!important;

}

---

如果您想保持页面刷新，但突出显示了正确的菜单项，则需要找到一种方法来选择正确的菜单项。例如，您可以将当前url与每个菜单项的href属性进行比较，如果它们匹配，则突出显示该项

---

另一个选项是使用AJAX更新页面内容。根据您的评论，我假设这不是您想要的，但无论如何，要做到这一点，您需要防止默认的锚行为并加载内容。这样，您就不必担心高亮显示消失，您的代码也会工作得很好（但您会遇到单页AJAX网站典型的其他问题，如URL状态、浏览器历史按钮等）。

由于页面刷新，CSS被删除。您需要将代码放入查看当前页面URL的页面中，并将所选的

CSS样式应用于相应的菜单项。这样做仍将使其作为菜单项运行，但在页面加载时仍保持选中状态

一种考虑的方法是将已经存在的代码保留在该页中，并将其添加到页面：
 jQuery( document ).ready(function() {
      var windowloc = window.location.pathname;
      jQuery(".art-block li").each(function() {
           if(jQuery(this).attr("href")==windowloc) {
                jquery(this).addClass("selected");
           }
      });
 });

另一种方法是将类添加到页面的
body
标记中，使其与菜单项相对应。这实际上是一种更简洁的方法，因为您可以为子页面而不仅仅是顶层部分突出显示菜单项。您需要为每个列表项合并一个唯一的CSS类，以便在页面加载时比较它们。我发现了一个可能对这种方法有用的方法

一旦CSS类就位，您可以使用类似于此JavaScript代码的代码来突出显示菜单项（在菜单
li
items和body类上）：

这两种方法中的任何一种都适用于您当前的网站，但请选择您认为现在和将来对您的网站最有意义的方法。
好吧，这是因为页面刷新发生了。我怀疑是这样的。如何解决这个问题？当你点击它时，你希望发生什么？我希望背景颜色保持在点击后的状态，只有当你点击菜单中的其他项目时背景颜色才会消失。我的意思是，你希望页面刷新还是使用AJAX更新页面内容？我已经尝试了你的第一个解决方案，但没有效果，我插入了一个console.log（jQuery（this.attr（“baseURI”））在每个语句中，并且始终未定义
 jQuery( document ).ready(function() {
      jQuery( document ).ready(function() {
           var bodyclass = jQuery("body").attr("class");
           jQuery(".art-block li").each(function() {
                if(jQuery(this).hasClass(bodyclass)) {
                     jQuery(this).addClass("selected");
                }
           });
      });
 });