Question

我通过框架CodeIgniter创建了我的网站，

在第一页，当我点击“paysage”图片（在右上角）或“paysage”按钮（在菜单中）时，它会转到“paysage”页面，然后一旦我返回到第一页，我想要的是：“paysage”图片保持彩色。

'area'标签和'li'标签转到同一页面，'img'标签是我将彩色图像放在CSS背景网址中的地方。

HTML：

<img id="paysage" alt="page_accueil" src="<?php echo base_url('assets/img/cadre_vide.png') ?>" />

<area alt="paysage" shape="poly" coords="518, 81, 713, 99, 719, 232, 520, 202" href="<?php echo site_url('categories/voir/' . $paysage->id); ?>"/>

<li><a <?php if($this->uri->segment(3) == "1" && $this->uri->segment(1) == "categories"){ ?> class="active" <?php } ?> href="<?php echo site_url('categories/voir/1') ?>">Paysage</a></li>

CSS：

#paysage{
    top:0;
    opacity:0;
    padding:0;
    z-index:-1;
    position:absolute;
    background-repeat:no-repeat;
    background:url('../../assets/img/hover-paysage.png') no-repeat;
    -webkit-background-size: cover; /* pour anciens Chrome et Safari */
    background-size: cover; /* version standardisée */
}

所以我尝试了像这样的jQuery

$('area[alt="paysage"]').click(function(){
    $('#paysage').fadeTo('fast', 1);
});

当然它不起作用，因为点击更改了页面（URL），jQuery代码只能在同一页面中执行某些操作。

所以我理解，我需要匹配：
- 如果更改了网址然后返回，则 - 或点击区域标记（或li标记），
这样我就可以将彩色图像的不透明度设置为1。

更简单的说，我想要的是：
“paysage”图片保持彩色，一旦点击并转到其他页面然后返回，它仍然是并且始终是彩色的。

我会为剩下的照片做到这一点。我希望这很清楚，非常感谢能帮助我的人！

Answer 1

有3种选择。

在服务器端保存某种信息，以确定是否有人点击了它们。（很可能不受欢迎）
在会话中保存数据，以便您可以在网站上的任何位置使用和访问它。（比在DB或其他东西中保存信息更不可取。但仍然是服务器端）
使用JS localStorage。这可能就是你想要的那个

使用localStorage，您可以使用普通JS在客户端保存信息，并检查用户是否单击了图像/按钮，并决定是否保持图像的颜色。

我知道W3Schools是一个糟糕的资源，但事实如此。 http://www.w3schools.com/html/html5_webstorage.asp

Answer 2

如果您对localStorage / caching感到满意，那么这可能是您应该使用的。

否则，Remy Sharp写了一个jQuery插件，可能是你正在寻找的，只要这些元素可以被标记为“访问过”。 https://remysharp.com/2008/02/25/visited-plugin

这是该插件的演示：http://download.remysharp.com/visited.html

P.S。真的很喜欢这个网站！

单击如何识别按钮

2 个答案: