Showing selected tabs differently with JQuery ajax tabs
-
01-10-2019 - |
Question
I had tabs with preloaded content like this:
$(function () {
$('div.tabs ul.tabNavigation a').click(function () {
$('div.tabs ul.tabNavigation a').removeClass('selected');
$(this).addClass('selected');
return false;
}).filter(':first').click();
});
This added class="selected" to links and css made selected tab look different
<div class="tabs">
<ul class="tabNavigation">
<li><a href="#content1">c1</a></li>
<li><a href="#content2">c2</a></li>
<li><a href="#content3">c3</a></li>
</ul>
<div id="content1">
content 1
</div>
<div id="content2">
content 2
</div>
<div id="content3">
content 3
</div>
Now I`m trying to get ajax to work. Well It's working but I'm having troube getting Class="selected" to my links.
The js function with ajax looks like this:
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("there was a problem");
}
}
});
});
How can I extend it so that it gives clicked link class "selected"? Similar to the preloaded content version.
Solution
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Laadimisel ilmnes viga");
}
}
});
$('#tabs A').click(function(){
if($(this).hasClass('selected')){ return false; }
$('#tabs A.selected').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
This worked.
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow