Creating tabs in SharePoint using Javascript and CSS

I couldn’t find an example of this, but I was determined to make it work. Here is the result.

I wanted a set of tabs where clicking on a tab would change the category but stay on the same page. Also, I must be able to pass in that category through the URL.

For example, I might have a web page http://...describe.aspx. I want to display information from several SharePoint lists. However, if I use the
URL http://...describe.aspx?animal=cat, then I only want the information about cats, and if I use http://...describe.aspx?animal=dog, then I only want the information about dogs.

Data views in SharePoint Designer will be used to display the desired information, using the animal variable. The method for that is not described here.

So I need to somehow read the variable from the URL using JavaScript. Then I need to highlight the tab corresponding to the variable. I found the code for that here: http://www.dynamicdrive.com/forums/archive/index.php/t-11883.html

It doesn’t look that great in the screenshots, but when you put the code into a SharePoint web part, it looks better. Here is the code:


<style type="text/css">



span.class1

{

float: left;

padding: 4px 0px;

font-size: 1em;

font-family: Tahoma, sans-serif;

border-right: 1px solid rgb(123,166,225);

}



.class1 A:link

{

background-color: #ffffff;

padding: 4px 10px;

background-image="url(/sites/_layouts/images/topnavunselected.gif)";

background-repeat:repeat-x;

}

.class1 A:visited

{

background-color: #ffffff;

padding: 4px 10px;

background-image="url(/sites/_layouts/images/topnavunselected.gif)";

background-repeat:repeat-x;

}

.class1 A:hover

{

text-decoration: none;

background-color: #FCE293;

padding: 4px 10px;

background-image="url(/sites/_layouts/images/PortalTabSelected.gif)";

background-repeat:repeat-x;

}

.class1 A:active

{

background-color: #ffffff;

padding: 4px 10px;

background-image="url(/sites/_layouts/images/topnavunselected.gif)";

background-repeat:repeat-x;

}









</style>





<script type="text/JavaScript">



// set the color of the chosen tab

// the tab is chosen by appending ?page=cat to the URL



function change(page)

{

document.getElementById(page).style.backgroundColor = "#7BA6E1";

document.getElementById(page).style.backgroundImage="url(/sites/_layouts/images/topnavselected.gif)";

document.getElementById(page).style.backgroundRepeat= "repeat-x";

document.getElementById(page).style.fontWeight= "bold";



}



// runs a function at page load time



function addLoadEvent(func) {



  var oldonload = window.onload;

  if (typeof window.onload != 'function') {

    window.onload = func;

  } else {

    window.onload = function() {

      if (oldonload) {

        oldonload();

      }

      func();

    }

  }

}



// run this function at page load time



addLoadEvent(function $_GET(key_str) {

if(window.location.search) {

var query = window.location.search.substr(1);

var pairs = query.split(/&|;/);

for(var i = 0; i < pairs.length; i++) {

var pair = pairs[i].split("=");

if(unescape(pair[0]) == key_str)

return unescape(pair[1]);

}

}

change(pair[1]);

}

);



</script>



<span class=class1>

<a href="default.aspx?page=cat" id=cat>cat</a>

</span>



<span class=class1>

<a href="default.aspx?page=dog" id=dog>dog</a>

</span>



<span class=class1>

<a href="default.aspx?page=horse" id=horse>horse</a>

</span>





- schneid