Hi all, this is my first post. I’m a Wordpress newbie trying to create tabs that remain the same tab after page refresh. The code below works, but struggling to style it.
FYI, I’m using WP theme, so anything I do with regards to custom CSS interfered with other styling. Any tips and advice is much appreciated.
The code I’m using as follow:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li><a href="#fragment-1">Product1</a></li>
<li><a href="#fragment-2">Product2</a></li>
<li><a href="#fragment-3">Product3</a></li>
</ul>
<div id="fragment-1">[product_page id="677"]</div>
<div id="fragment-2">[product_page id="678"]</div>
<div id="fragment-3">[product_page id="679"]</div>
</div>
<script>// <![CDATA[
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) return c.substring(name.length,c.length); } return ""; } function checkCookie() { var user=getCookie("username"); if (user!="") { return user; } else { return false; } } jQuery(document).ready(function(){ if(checkCookie()){ $( "#tabs" ).tabs({ active: checkCookie() }); }else{ $( "#tabs" ).tabs({ active: 0 }); } jQuery("#tabs ul li a").click(function(){ var status = jQuery(this).attr("href"); setCookie("username",parseInt(status.replace("#fragment-",""))-1,365); }); });
// ]]></script>