javascript - css 上的 Jquery 问题

Question

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

这是我的网站，http://debatoversigt.dk/如果你点击左边的菜单，你可以看到背景颜色出现一会然后消失。

这是我的 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;

}

Answer 1

由于页面刷新，CSS 被移除。您需要将代码放入查看当前页面 URL 的页面，并将您的 selected 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 类，以便您可以在页面加载时比较它们。我找到了一个 tutorial on adding body classes to Joomla这可能对这种方法有帮助。

一旦您的 CSS 类就位(在菜单 li 项和 body 类上)，您将使用类似于此 JavaScript 代码的代码来突出显示菜单项:

 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");
                }
           });
      });
 });

这两种方法都适用于您当前的网站，但请选择您认为对您的网站现在和 future 最有意义的方法。