How to change a CSS class based on a query string parameter

I have a SharePoint server intranet site that displays blog posts that have tags assigned to assist with sorting. SharePoint allows you to dynamically sort the blog entires using a query string - so technically the page URL stays the same and it simply adds "?name=topic" to the end of the URL to sort the blog posts.

I have a simple row of headings at the top to allow the user to click a heading to sort the information displayed on the page. Eac开发者_JS百科h heading is the same URL with the a difference query string at the end.

e.g. Sort by:

Video (www.websitename.aspx?name=video)

Images (www.websitename.aspx?name=images)

Audio (www.websitename.aspx?name=audio)

I would like to style the headings based on the "active' or selected heading. How can I change the CSS class of a heading to "selected" based on the query string parameter? (or is there an easier way to do this?)

I am still learning my way around Javascript - so i'm looking for a solution that isn't too challenging to implement.

Thanks!

Jared

You can easily get the querystring with Javascript:

window.location.search.substring(1);

window.location is the whole URL, search.substring is the part after the question mark. So now you could implement an ugly switch statement changing the styles depending on your query string:

  var queryString = window.location.search.substring(1); 

  switch (queryString) {
    case "video": videoelement.style.background = red;
                   break;

    case "images": imageselement.style.background = red;
                     break;

    case "audio": audioelement.style.background = red;
                     break;
  }