Private: Home › Forums › HTML Templates › Mixed Modern and Professional HTML Template › Open specific tab › Reply To: Open specific tab
March 13, 2015 at 12:54 pm
#2484
Participant
Hello,
To do this, open include.js file and find the following code:
// CONTENT TABS
(function () {
$('.tabs').each(function () {
var $tabLis = $(this).find('li');
var $tabContent = $(this).next('.tab-content-wrap').find('.tab-content');
$tabContent.hide();
$tabLis.first().addClass('active').show();
$tabContent.first().show();
});
$('.tabs').on('click', 'li', function (e) {
var $this = $(this);
var parentUL = $this.parent();
var tabContent = parentUL.next('.tab-content-wrap');
parentUL.children().removeClass('active');
$this.addClass('active');
tabContent.find('.tab-content').hide();
var showById = $($this.find('a').attr('href'));
tabContent.find(showById).fadeIn();
e.preventDefault();
});
})();
Modify the code so it looks like following:
// CONTENT TABS
(function () {
$('.tabs').each(function () {
var $tabLis = $(this).find('li');
var $tabContent = $(this).next('.tab-content-wrap').find('.tab-content');
$tabContent.hide();
$tabLis.first().addClass('active').show();
$tabContent.first().show();
});
$('.tabs').on('click', 'li', function (e) {
var $this = $(this);
var parentUL = $this.parent();
var tabContent = parentUL.next('.tab-content-wrap');
parentUL.children().removeClass('active');
$this.addClass('active');
tabContent.find('.tab-content').hide();
var showById = $($this.find('a').attr('href'));
tabContent.find(showById).fadeIn();
e.preventDefault();
});
var url = (window.location).href;
if (url.indexOf("#tab") > -1) {
var id = url.substring(url.lastIndexOf('#') + 1);
var href = $('a[href^="#' + id + '"]');
$(href).parent().parent().children().removeClass('active');
$(href).parent().parent().next().children().css('display', 'none');
$('a[href^="#' + id + '"]').parent().addClass('active');
$('#' + id).css('display','block');
}
})();
Note that the URL has to have #tab at beginning. For example, index.html#tab10
.
Robert