Здравейте,
Може ли някой да помогне как да направя така, че когато се кликне на някой линк в съответния таб и страницата се презареди, активния таб да си остава, а не както сега да минава на първия таб?
Намерих една тема в стак, но линковете изчезват, когато се опитам така да го направя.
Ето го кода:
А това е хтмл-а
edit::
Аз се оправих. Замених цялото с това:
Единствено, че под по-стари браузери не работи, но засега това е решението.
Може ли някой да помогне как да направя така, че когато се кликне на някой линк в съответния таб и страницата се презареди, активния таб да си остава, а не както сега да минава на първия таб?
Намерих една тема в стак, но линковете изчезват, когато се опитам така да го направя.
Ето го кода:
Код:
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content").find("[id^='tab']").hide();
$("#tabs li:first").attr("id","current");
$("#content #tab1").fadeIn();
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){
return;
}
else{
$("#content").find("[id^='tab']").hide();
$("#tabs li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('name')).fadeIn();
}
});
});
</script>
Код:
<ul id="tabs">
<li><a href="#" name="tab1">tab1</a></li>
<li><a href="#" name="tab2">tab2</a></li>
</ul>
<div id="content">
<div id="tab1">
<h2>head of tab1</h2><br/>
// content
</div>
<div id="tab2">
<h2>head of tab2</h2><br/>
// content 2
</div>
</div>
edit::
Аз се оправих. Замених цялото с това:
Код:
<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>