Question

此处的页面：http://berlinbraves-pub.webflow.io/

当您单击主页上的“文章”链接（大型水平图像）时，文本意味着在点击时更改为“类别颜色”，允许用户在页面移动到页面之前短暂地看到颜色。指定的URL。这可以在Chrome上成功查看。

在Safari上，“点击”时无法看到互动。当你回到页面时（通过退格等），它只是可见的，然后文章的文字永久保持指定的颜色（不再是白色/黑色，但现在是绿色等）

css在这里：

<style> 
  .footballclassed.activecolor *{ color:#88d388 !important; } 
  .basketballclassed.activecolor *{ color:#5488cc !important; } 
  .Baseballclassed.activecolor *{ color:#efc15b !important; } 
  .Runningclassed.activecolor *{ color:#6e7783 !important; } 
  .footer-content .article-title{ color:#000 !important; } 
</style>

Jquery在这里：

$( ".w-dyn-items .w-dyn-item" ).each(function() { 
  if($(this).find('.article-title').html()=='Football'){ 
    $(this).addClass("footballclassed"); } 
  if($(this).find('.article-title').html()=='Basketball'){ 
    $(this).addClass("basketballclassed"); } 
  if($(this).find('.article-title').html()=='Baseball'){ 
    $(this).addClass("Baseballclassed"); } 
  if($(this).find('.article-title').html()=='Running'){ 
    $(this).addClass("Runningclassed"); } }); 
  $( ".w-dyn-item" ).click(function() { 
    $(this).addClass("activecolor"); 
});

如何在Safari上以与在Chrome上相同的方式使其在Safari上运行？

Answer 1

您的jQuery点击行为正在与标准的HTML行为作斗争，而且它不会赢。这就是为什么你会看到很多关于点击行为的preventDefault（）的原因你有什么理由不能在css中使用：active pseudoclass来应用颜色吗？使可点击元素成为一个展示click-me-change-color-and-redirect行为的预期和可访问元素。
.mycategory：active {color：green;}

Safari逐页添加到网址，而不是“点击”

1 个答案: