Tab title click event handlers

Hi,
I’m having the same issue. I’m trying to have tab titles trigger some jquery to no avail. I see above that Ismael provided some modified code to the OP to rectify the situation. Is it possible I could obtain that code so that tab title can trigger jquery?
thnx!

Hi, Ismael

Thanks for the reply. The url is in the private content area. If you scroll down to the first tab area, you will see a “button” above the tabs. If you click that, the bg image on that wrapper div will change. that is the behavior that I want, however, I want each of the tabs “sensor”, “dashboard” and “engage” to trigger the jquery as well and change the bg image.

Below is the script I’m using. #testid is assigned to the small button above the tabs now and works fine. However, I also have #testid assigned to each of the tabs as well, but they don’t trigger the jquery. I’ve also tried targeting the fake-data-ids and even the unique classes., eg., .tab_counter_0 of each tab. Is there something I can change in tabs.php or a function I can add that will allow the tab divs to trigger the jquery? Any help would be appreciated!

thnx!

<script>
$(document).ready(function(){
$(“#testid”).click(function(){
$(“#services-tab-1”).css(‘background-image’, ‘url(http://www.whiskerlabs.com/wp-content/uploads/2018/01/photo-services-ee.jpg)’);
});
});
</script>

Hi, Ismael
I tried that as well. Nothing that I target in a tab div works. As you can see below, I even hardcoded id'”testid” into tabs.php to no avail.

thnx!

<div data-fake-id=”#sensor” id=”testid” class=”tab tab_counter_0″ itemprop=”headline”>SENSOR</div>

Hi,
Another update that might help. I did this as a test. if you load the page and click any div on the page, the first tab area’s bg image will change. Any div except the divs that are the tab titles. e.g.
<div data-fake-id=”#sensor” class=”tab active_tab tab_counter_0″ itemprop=”headline”>SENSOR</div>
none of these divs will trigger the javascript. It’s like jquery doesn’t see them or recognize them as divs. try loading the page and clicking any div and the bg image will change. Then reload the page and click any of the tabs… nothing.

this is the script I used for the test.

thnx!

<script>
$(document).ready(function(){
$(“div”).click(function(){
$(“#services-tab-1”).css(“background-image”, “url(http://www.whiskerlabs.com/wp-content/uploads/2018/01/photo-services-ee.jpg)”);
});
}); s
</script>

Hi, Ismael

Thanks! I appreciate you guys looking into it. I’ve opened a new thread per your request with the login info. This is a staging version of the site.

thanks again!

• This reply was modified 6 years, 3 months ago by waxingmedia.