You could do it by using some PHP and getting parameters from the URL; but since you are using JavaScript have you considered an AJAX approach? You could then keep a variable that is assigned the active tab, then when you change tabs you can update the variable (and thus update the tab to display).
The PHP solution would probably be best for page reloads; just assign a variable to the url like http://www.mywebsite.com/page.php?tab=tabIDhere and then grab the tab variable assigning it to a javascript var. I hope that makes some sense!
I don’t know how exactly to make it with php and this is working perfectly so far. Just asked if is not so hard to modify this piece of code… I’m totaly new in jquery and kinda begginer in php at all.
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
}
else{
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
});
});
function getParameterByName(name) {
name = name.replace(/[\\[]/, "\\\\[").replace(/[\\]]/, "\\\\]");
var regex = new RegExp("[\\\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results == null ? "" : decodeURIComponent(results[1].replace(/\\+/g, " "));
}
var tab = getParameterByName("tab");
if(tab){
$('[name="' + tab + '"]').trigger("click");
}
</script>
</head>
Here is the body
<ul id="tabs">
<li><a href="?tab=1" name="tab1" >tab1</a></li>
<li><a href="?tab=2" name="tab2" >tab2</a></li>
</ul>
<div id="content">
<div id="tab1">
<h2>Category Bikes</h2><br/>
// Here I have query to show category list from mysql
</div>
<div id="tab2">
<h2>Category cars</h2><br/>
// Here I have second query to show category list from mysql
</div>
Ok, let’s do it a bit differently.
The way the thing is coded, we’ll just be fighting it if we use a query string.
Let’s use local storage instead.
Change your JS to this:
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
} else {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
var tab = $(this).attr("name");
localStorage.setItem("tab", tab);
});
var currTab = localStorage.getItem("tab");
$('a[name="' + currTab + '"]').trigger("click");
and place it before the closing body tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Accordion</title>
</head>
<body>
<ul id="tabs">
<li><a href="#" name="tab1" >Снимки</a></li>
<li><a href="#" name="tab2" >Вицове</a></li>
</ul>
<div id="content">
<div id="tab1">
<h2>Category Bikes</h2><br/>
// Here I have query to show category list from mysql
</div>
<div id="tab2">
<h2>Category cars</h2><br/>
// Here I have second query to show category list from mysql
</div>
</div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
} else {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
var tab = $(this).attr("name");
localStorage.setItem("tab", tab);
});
var currTab = localStorage.getItem("tab");
$('a[name="' + currTab + '"]').trigger("click");
</script>
</body>
</html>
This working and after refresh is the tab before refresh on the page. I don’t see in URL ‘?tab1/2’ but i gues since is working I don’t need to bother about this?
Well, the thing is that localstorage is not supported by all browsers, so depending n what you want to support, that could be an issue for you.
Also, using a query string would allow your users to bookmark a certain tab directly.
Having said that though, if it works for you and browser support is not an issue, then you’re good