javascript - js: hiding divs -


i pretty new javascript please bear me.

$('#biocontent').css('display','none'); $('#skillscontent').css('display','none'); $('#credstab').css('background-color','#fff'); $('#credstab a').css('color','#19d700'); $('#biotab').css('background-color','#ccc'); $('#biotab a').css('color','#444');   $('#skillstab').css('background-color','#ccc'); $('#skillstab a').css('color','#444');  $('#credstab').click(function(){   $('#credscontent').css('display','block');   $('#biocontent').css('display','none');   $('#skillscontent').css('display','none');   $('#credstab').css('background-color','#fff');   $('#credstab a').css('color','#19d700');   $('#biotab').css('background-color','#ccc');   $('#biotab a').css('color','#444');   $('#skillstab').css('background-color','#ccc');   $('#skillstab a').css('color','#444'); })  $('#biotab').click(function(){   $('#biocontent').css('display','block');   $('#credscontent').css('display','none');   $('#skillscontent').css('display','none');   $('#biotab').css('background-color','#fff');   $('#biotab a').css('color','#19d700');   $('#credstab').css('background-color','#ccc');   $('#credstab a').css('color','#444');   $('#skillstab').css('background-color','#ccc');   $('#skillstab a').css('color','#444'); })   $('#skillstab').click(function(){   $('#skillscontent').css('display','block');   $('#biocontent').css('display','none');   $('#credscontent').css('display','none');   $('#skillstab').css('background-color','#fff');   $('#skillstab a').css('color','#19d700');   $('#biotab').css('background-color','#ccc');   $('#biotab a').css('color','#444');   $('#credstab').css('background-color','#ccc');   $('#credstab a').css('color','#444'); }) 

that's javascript implementation of tabs. on click, divs hide away , others appear.

my problem on skillstab, there's add skills method, , when click on that, refreshes page, , when does, brings me credstab, default when page loaded.

i wondering if that's way when refreshes, stay on skillstab.

keep state around, can done via fragment urls or html5 history.

e.g., make opening skills tab change fragment #skills, remain across refresh. check window.location.hash in onload determine initial state page should in.


function switchtotab(tabname) {     // dom/css manipulation etc. here }  var tabs = ['bio', 'skills', 'creds']; var initialtab = 'bio'; (var = 0; < tabs.length; i++) {     (function(tabname) {         document.getelementbyid(tabname + 'tab').addeventlistener('click', function() {             switchtotab(tabname);             location.hash = '#' + tabname;         }, false);     })(tabs[i]); }  window.addeventlistener('load', function() {     if (location.hash[0] == '#')         switchtotab(location.hash.substr(1)); }, false); window.addeventlistener('hashchange', function() {     if (location.hash[0] == '#')         switchtotab(location.hash.substr(1));     else         switchtotab(initialtab); }, false); 

untested, , there's plenty of js libraries out there abstract away you.


Comments

Popular posts from this blog

java - SNMP4J General Variable Binding Error -

windows - Python Service Installation - "Could not find PythonClass entry" -

Determine if a XmlNode is empty or null in C#? -