<script>
function checkCookies() {
var text = "";

if (navigator.cookieEnabled == true) {
text = "Cookies are enabled.";
} else {
text = "Cookies are not enabled.";
}
document.getElementById("demo").innerHTML = text;
}
</script>


<script>
function setColor(id){
$("ons-icon").css("color", "white");
$("ons-icon").attr("size","24px");
$('#' + id).css("color", "#ff9500");
$('#' + id).attr("size","32px");
}
</script>

<ons-page>

	<ons-tabbar id="tabbar" swipeable>
    <ons-tab onclick="setColor('Button1');" style="background-color: #37548a;" page="page1.html" active><ons-icon id="Button1" onclick="setColor('Button1');" icon="fa-globe"></ons-icon></ons-tab>
    <ons-tab onclick="setColor('Button2');" style="background-color: #37548a;" page="page2.html"><ons-icon id="Button2" onclick="setColor(Button2);" icon="fa-globe"></ons-icon></ons-tab>
    <ons-tab onclick="setColor('Button3');" style="background-color: #37548a;" page="page3.html"><ons-icon id="Button3" onclick="setColor(Button3);" icon="fa-globe"></ons-icon></ons-tab>


<script>
setColor('Button1');
</script>

</ons-tabbar>


</ons-page>

<template id="page1.html">
  <ons-page>
    <h2>TITLE</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="page2.html">
  <ons-page>
    <h2>TITLE</h2>
    
	CONTENT

   </ons-page>
</template>

<template id="page3.html">
  <ons-page>
    <h2>TITLE</h2>
    
	CONTENT

   </ons-page>
</template>