使用切换和同位素时更改css'活动'链接 [英] Change css 'active' link when using toggle and isotope

问题描述

我有关于我的此网页的问题。菜单和子菜单被切换，我正在使用同位素。我想知道是否有可能改变刚刚点击的链接的风格。因为这一切都发生在一个页面，其他解决方案这个问题不工作。

I have a question regarding this page of mine. The menus and submenus are toggled, and I'm using Isotope. I'd like to know if it's possisble to change the style of the link which just got clicked. Since this is all happening in one page, other solutions for this problem don't work.

我无法获得这工作，可能是因为我必须使用多个切换。 （+我的电视节目表页面增加了复杂性，因为它基本上是一个整个页面在切换。）

I can't get this to work either, probably because I have to use multiple toggles. (+ There is the added complexity of my tv schedule page, since it's basicly an entire page inside a toggle.)

我希望有人可以帮助我看看我的源代码。

I hope someone can help me by taking a look at my source code.

推荐答案

为您的活动样式创建一个css类， （背景：青色;颜色：白色）。例如调用类active。

Create a css class for your active style instead of the inline style you have currently on "TV Schedule" (background: teal; color: white). Call the class "active" for example.

只需在您已经使用jquery设置的点击处理程序中添加和删除此类。所以在你的来源134：

Simply add and remove this class within your click handler you already have setup with jquery. So at 134 in your source:

$('.sort a').click(function(){

  //add these 2 lines
  $('.sort a').removeClass('active');
  $(this).addClass('active');

  //the rest of your handler
  var selector = $(this).attr('data-filter');
  $container.isotope({
    filter: selector,
    animationOptions: {
      duration: 750,
      easing: 'linear',
      queue: false,
    }
  });
  return false;
});

第一行遍历并从该块中的所有a标签中删除它。下一个将它添加到被点击的那个。

The first line goes through and removes it from all the a tags in that block if it exists. The next one adds it to the one that was clicked.

这通常是我做这种事情的方式。它独立于同位素 - 只是使用你已经在那里的jquery。

That's usually the way I do this sort of thing. It's independent of isotope - just using the jquery you already have in there.

这篇关于使用切换和同位素时更改css'活动'链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！