For link
tags use data-fid
instead of id
:
<link data-fid='01' href='...' rel='...' disabled>
<link data-fid='02' href='...' rel='...' disabled>
As you can see, they should be disabled by default.
Add class font-selector-c
and attribute data-fid='xx'
to each li
.
Then the code:
$('.font-selector-c').on('click', function() {
var fid = $(this).data('fid')
$('link[data-fid]').prop('disabled', true) // disable all the stylesheets
$('link[data-fid="' + fid + '"]')
.prop('disabled', false) // enable one needed
localStorage.setItem('font', fid) // save the id of the selected
});
$('#font-selector-reset').on('click', function() {
$('link[data-id]').prop('disabled', true) // disable all the stylesheets
localStorage.setItem('font', null) // remove saved id
});
// On start: recalling user's choice
var c_fid = localStorage.getItem('font')
if (c_fid)
$('link[data-fid="' + c_fid + '"]').prop('disabled', false)