I was able to create a SharePoint list filter as per the steps in this solution. Page a list via A-Z
Now I am trying to highlight the selected letter through CSS (.selected) but not able to achieve it. Tried to add dynamic CSS to selected link $(this).css("color","blue"). Didn't help.
I think the problem is the changes are gone as it refreshes the page. All I want to do is highlight the letter which is selected.
The page reloads when you click your link, so you need to put JavaScript on the page which on load:
Step 2 will be a lot easier if you add an id to each link
So if you define your links like this:
<a id="linkA" href="?FilterField1=FirstLetter&FilterValue1=A">A</a>
<a id="linkB" href="?FilterField1=FirstLetter&FilterValue1=B">B</a>
<a id="linkC" href="?FilterField1=FirstLetter&FilterValue1=C">C</a>
...
Then the code you want to execute is like this:
(function() {
var match = location.search.match(/&FilterValue1=(.)/);
if (match) {
var element = document.getElementById("link"+match[1]);
if (element) {
element.style.color = "blue";
}
}
})();
