I have a single web page with three different tabs. By clicking on each tab, the text displayed changes accordingly. I am looking to add three separate images for each tab so that when a user clicks on a specific tab, the image associated with it also changes. You can view the theme's link here:
Below is the JavaScript code snippet that handles the text change functionality upon tab clicks.
//Swap Titles
jQuery(document).on('click','.current-directory',function(){
jQuery(this).parents('ul').find('li').removeClass('active');
jQuery(this).addClass('active');
var dir_name = jQuery(this).data('dir_name');
var id = jQuery(this).data('id');
jQuery(this).parents('.tg-banner-content').find('em.current_directory').html(dir_name);
if( Z_Editor.elements[id] ) {
var load_subcategories = wp.template( 'load-subcategories' );
var data = [];
data['childrens'] = Z_Editor.elements[id];
data['parent'] = dir_name;
var _options = load_subcategories(data);
jQuery( '.subcats' ).html(_options);
}
});
//Prepare Subcategories
jQuery(document).on('change','.directory_type', function (event) {
var id = jQuery('option:selected', this).attr('id');
var dir_name = jQuery(this).find(':selected').data('dir_name');
if( jQuery( '.dynamic-title' ).length ){
jQuery( '.dynamic-title' ).html(dir_name);
}
if( Z_Editor.elements[id] ) {
var load_subcategories = wp.template( 'load-subcategories' );
var data = [];
data['childrens'] = Z_Editor.elements[id];
data['parent'] = dir_name;
var _options = load_subcategories(data);
jQuery( '.subcats' ).html(_options);
}
});
The following CSS code has been customized in an attempt to add multiple background images instead of just one static image. However, only one image is being added and does not change dynamically as desired.
.tg-homebanner{position: relative;}
.tg-homebanner figure{
width: 100%;
float: left;
margin: 0;
z-index: 1;
position: relative;
}
...
/* Additional CSS styles go here */
.show-search i{
position: relative;
top: 50%;
}
Recent modifications were made by updating the CSS as shown below:
.tg-banner-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: url('URL OF MY IMAGE') center center no-repeat;
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:linear-gradient(to bottom right,#002f4b,#dc20000);
opacity: 1;
}
Despite the changes above, only one background image is being displayed without changing with each click on the tabs.