在点击一个特定的<a>链接一次

Show hidden div permanently throughout website after clicking on a specific <a> href link once

本文关键字：链接 一次 一个      更新时间：2023-09-26

我发现了这个问题的链接，问题是他们给出的解决方案是在html中单击任何div，我需要这样的东西，当我点击第一个div时，第二个div显示，当我按下第二个div时，第三个div显示。我需要把它保存在localstorage中。这是我的HTML代码:

<div id='btn1' class="col-lg-4"">
<a id="tema_1 " href="tema.html"><img id="img_tema1" class="img-circle" src="../assets/img/primer_tema.gif" alt="Generic placeholder image" width="140" height="140"></a>
<h2>Tema 1</h2>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4-2">
<a href=""><img id="img_tema2" class="img-circle2" src="../assets/img/segundo_tema.gif" alt="Generic placeholder image" width="140" height="140"></a>
<h2>Tema 2</h2>  
</div><!-- /.col-lg-4-2 -->
<div class="col-lg-4-3">
<a href="tema_3.html"><img id="img_tema3" class="img-circle3" src="../assets/img/tercer_tema.gif" alt="Generic placeholder image" width="140" height="140"></a>
<h2>Tema 3</h2>
</div><!-- /.col-lg-4-3 --

这是我使用的Jquery代码示例:

var hide2 = localStorage[location] ? false : true;
var hidden2 = document.querySelector('.col-lg-4-2');
if(hide2) {
    hidden2.style.display = 'none';
    document.onclick = function() {
        localStorage[location] = true;
        hidden2.style.display = '';
        document.onclick = '';
        console.log('click');
    }
}

但是正如我所说的……它使任何我点击的div，显示Tema 2，我需要唯一可以显示Tema 2的div是Tema 1div。

请原谅我的英语不好，但我的母语是西班牙语。

谢谢你的帮助。

我认为这可能是解决使用简单的jQuery。我已经使用了指定的例子:上一个类似的问题，并改变了它，所以它将适合您的代码。它目前可以工作，但如果你不喜欢我的解决方案，我可能会想要解决它。

 $(function () {
    var showLittleHeader = localStorage.getItem('#second-img');
    if (showLittleHeader) {
        $('#second-img').show();
    }
    $('#first-img').on('click', function () {
        localStorage.setItem('#second-img', 1);
        $('#second-img').show();
    });
});
$(function () {
    var showLittleHeader = localStorage.getItem('#third-img');
    if (showLittleHeader) {
        $('#third-img').show();
    }
    $('#second-img').on('click', function () {
        localStorage.setItem('#third-img', 1);
        $('#third-img').show();
    });
});

看看这个JS Fiddle，看看它是否为你做了这项工作:

使用本地存储的更新解决方案

相关文章：