頁面重新加載jQuery后如何顯示div和當前鏈接處於活動狀態

Question

我想顯示一個div和一個激活的鏈接，在頁面重新加載后單擊該鏈接。 最初，類active被調用到第一個鏈接，而div被隱藏。

我檢查了所有可以想到的內容，但沒有得到解決方案，因為頁面重新加載后我的代碼無法正常工作。

請查看html和jquery代碼：

<div class="sub-cols" style="display:none;">
    <div class="wraper-berkowits">
    <a class="active" href="<?php echo Mage::getBaseUrl() ?>products-for-sale/attachments.html">Attachments</a>
    <a href="<?php echo Mage::getBaseUrl() ?>products-for-sale/removal.html">Removal</a></li>
    <a href="<?php echo Mage::getBaseUrl() ?>products-for-sale/hair-loss-store.html">Hair Loss</a></li>
    <a href="<?php echo Mage::getBaseUrl() ?>products-for-sale/care-maintenance.html">Care &amp; maintenance </a>
    </div>
</div>


jQuery(document).ready(function() {
    jQuery('.menu:first-child').addClass('first'); 

    jQuery('li.last a').click(function() {  
        jQuery('.sub-cols').show();
        return false;
    }); 

    jQuery(".sub-cols a").click(function () {        
        jQuery(this).addClass('active').siblings().removeClass('active'); 

    });
});

請檢查上面的代碼，並告訴我如何獲得所需的結果。

Answer 1

從您的評論中可以更好地理解問題，因為您的需要是即使在頁面重新加載后也可以重新獲得鏈接的狀態。 我可以為您提供實現目標的提示

有兩種方法-1）您可以在php中使用$ _SESSION存儲單擊的鏈接，並可以使用jquery顯示它

2）僅使用javascript-使用window.localStorage –存儲沒有到期日期的數據

當您需要設置一個應在下一頁中反映的變量時，請使用：

var someVarName = "value";
localStorage.setItem("someVarName", someVarName);

在您的代碼中，您可以執行以下操作

jQuery(".sub-cols a").click(function () {
        localStorage.setItem("someVarName", jQuery(this).text());
        jQuery(this).addClass('active').siblings().removeClass('active');
    });
    jQuery(".sub-cols").show();

在任何頁面（例如頁面加載時）中，都可以像這樣獲得它：

var someVarName = localStorage.getItem("someVarName");

.getItem()將返回null或存儲的值。

對於您的示例，您可以像這樣使用

if(localStorage.getItem("someVarName")!=null){
        $('a').filter(function(){
                return this.innerHTML == localStorage.getItem("someVarName"); 
            }).css({background:"#F00"});
    }

我提供了一個更新的演示-http: //jsfiddle.net/bvqnzuwa/3/要對其進行測試，請單擊任何鏈接，然后重新加載頁面。 即使重新加載頁面后，您在單擊的鏈接上也會看到背景色。