簡體   English   中英

單擊特定的<a>href鏈接一次</a>后,在整個網站上永久顯示隱藏的div

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

我發現了這個問題的鏈接 ,就像我遇到的那樣,問題是他們提供的解決方案是單擊html中的任何div,我需要類似的內容,當我單擊第一個div時,第二個div顯示何時我按第二個div,顯示第三個div。 而且我需要保留在本地存儲中...這是我的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 1 Div。

對不起,我的英語不好,但我的母語是西班牙語。

感謝您的任何幫助。

我認為可以使用簡單的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,看看它是否對您有用:

更新的本地存儲解決方案

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM