2017-02-17 144 views
0

我想將錨標記的值存儲在本地存儲中,無論哪個被點擊,並且我想在jquery中讀取負載,然後我需要爲該被點擊的值添加類作爲「active」如何執行此操作?如何將標籤值存儲在本地存儲中以及如何從本地存儲中獲取?

下面是HTML代碼,

<div class="flDropDiv category_fl"> 
 
    <div class="flItems"><a class="category_filter" value="Full bed sheets " href="http://192.168.1.156/eles/bed-linen/full-bed-sheets"> Full bed sheets </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Fitted bed Sheet " href="http://192.168.1.156/eles/bed-linen/fitted-bed-sheet"> Fitted bed Sheet </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Flat bed sheet " href="http://192.168.1.156/eles/bed-linen/flat-bed-sheet"> Flat bed sheet </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Twin bed sheet " href="http://192.168.1.156/eles/bed-linen/twin-bed-sheet"> Twin bed sheet </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Twinxl bed sheets " href="http://192.168.1.156/eles/bed-linen/twinxl-bed-sheets"> Twinxl bed sheets </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Queen bed sheet " href="http://192.168.1.156/eles/bed-linen/queen-bed-sheet"> Queen bed sheet </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="King bed sheets " href="http://192.168.1.156/eles/bed-linen/king-bed-sheets"> King bed sheets </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Cal king bed sheets " href="http://192.168.1.156/eles/bed-linen/cal-king-bed-sheets"> Cal king bed sheets </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Duvet covers " href="http://192.168.1.156/eles/bed-linen/duvet-covers"> Duvet covers </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Bed skirts " href="http://192.168.1.156/eles/bed-linen/bed-skirts"> Bed skirts </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Standard Pillow cases " href="http://192.168.1.156/eles/bed-linen/standard-pillow-cases"> Standard Pillow cases </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="King Pillow cases " href="http://192.168.1.156/eles/bed-linen/king-pillow-cases"> King Pillow cases </a> </div> 
 
    <div class="flItems"><a class="category_filter" value="Pillow shells " href="http://192.168.1.156/eles/bed-linen/pillow-shells"> Pillow shells </a> </div> 
 
</div>

+0

包括你已經嘗試過什麼到目前爲止 – guradio

+0

所以你想要的代碼記住什麼聯繫你已點擊 –

+0

你想使你的點擊的錨標籤爲有效? –

回答

0

localStorage的訪問是很容易只使用

localStorage.setItem('key', value) 

localStorage.getItem('key') 
1

Sample Fiddle

設置並獲取本地存儲的值。對於活動類使用添加/刪除類。

$(document).on('click', 'a', function() { 
    $(this).prop('href') 
    localStorage.setItem('Url', $(this).prop('href')); 
    alert(localStorage.getItem('Url')); 
    $("a").each(function(index) { 
    if ($(this).prop('href') === localStorage.getItem('Url')) 
     $(this).addClass('newanchor'); 
    else 
     $(this).removeClass('newanchor'); 
    }); 
}); 
+0

查看活動課的更新。 –

+0

On load it does not showing – Mohan

+0

???我不站在? –

0

試試這個代碼:

var localStorageIndex = "clickedLink"; 
$(function() { 
    $(".category_filter").click(function(e) { 
    if($(e.target).hasClass("active")){ 
    return; 
    } 

    var clickedLink = getActiveLinkFromLocalStorage(); 
    if(clickedLink !== e.target.href){ 
     clickedLink = e.target.href; 
     $(e.target).addClass("active"); 
     localStorage.setItem(localStorageIndex, clickedLink); 
    } 
    }) 

    function getActiveLinkFromLocalStorage() { 
    return localStorage.getItem(localStorageIndex); 
    } 

    function initActiveLink(){ 
    var clickedLink = getActiveLinkFromLocalStorage(); 
    if(!clickedLink){ 
     return; 
    } 
    $("a[href='" + clickedLink + "'].category_filter").addClass("active"); 
    } 
    initActiveLink(); 
}); 

jsfiddle

+0

它工作正常,但當我再次點擊它應該隱藏活動類,當我復出意味着它應該從本地存儲清除。 – Mohan

+0

@Mohan請注意將來的所有要求。 當我說「當我復出」時,你是什麼意思? –