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
Post a Comment