css上的Jquery问题

Jquery issue on css

本文关键字：问题 Jquery 上的 css      更新时间：2023-12-15

我使用jQuery函数在点击li标签时添加一个类。问题是类被添加了一段时间，然后消失了。也许，因为我正在研究joomla，在我的jquery函数之后还有另一个jquery函数或另一个php脚本可以修改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;
}

由于页面刷新，CSS被删除。您需要将代码放入页面中，以查看当前页面的URL，并将selectedCSS样式应用于相应的菜单项。这样做仍然可以让它作为菜单项发挥作用，但在页面加载时也可以保持选中状态。

一种需要考虑的方法是将您已经拥有的代码保留在适当的位置，并将其添加到页面中：

 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类，以便在页面加载时进行比较。我发现了一个关于向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");
                }
           });
      });
 });

这两种方法中的任何一种都适用于你当前的网站，但选择你认为对你的网站现在和未来最有意义的方法。

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

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

相关文章：