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:

  1. extracts the FilterValue1 query string parameter
  2. find the corresponding link
  3. applies the css

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";
| improve this answer | |
  • Thank you your time. Would you please elaborate on point 2. May be with little piece of code if you can. – user57156 Jul 18 '16 at 16:01
  • Code added to answer – Per Jakobsen Jul 18 '16 at 17:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.