Streaming live at 10am (PST)

Tab click changes DIV Background Image


#1

Hello,

is it possible to change a DIVs background image by clicking on TAB?
I want to habe the TAB navigation in front of a image. This image should
change every time i click on the TAB.

I appreciate every good tipp.

best
kalli


#2

Should it be the only content to be changed when you click on that tab?

Like

TAB1 (active) TAB2 TAB3

==============================================

IMAGE 1

TAB1 TAB2 (active) TAB3

==============================================

IMAGE 2


#3

Correct, that is how it should react.
Important is that the Image stands behind the TAB Navigation.

best kai


#4

Ooh I've seen this done on a few websites recently and loved the feel. I'm assuming a click interaction or even a hover interaction affecting the div background element. Not sure how to call up a different image though.


#5

Do you have any reference?

If its not within the corresponding tab content element, i think its only possible with the use of javascript. But no big deal.

Can give you an example on monday.

Regards
Daniel


#6

Thanks, here i have the reference.

https://preview.webflow.com/preview/tab-bg-img?preview=727633333149e4ee5d80b2d3ddb2121a

I thought of changing the bg-img class, but maybe there will be an more easier way to archieve the effect.

best
kalli


#7

I m sick so I cant be online yesterday.

The only way im my oppinion is to do it either with jquery or java.

Lets set it up like this:
Lets pretend you have a standard background image and want to change it when you click on the second tab.

First, lets build the elements like you did in your example and apply three IDs to the
a) element that holds the bg image
b) + c) the two tabs that will change the class of the bg image div.

Your custom head code will look like this:

<style type="text/css">
    .bg1{ background-image: url(http://www.marsafenet.org/marsafenet/wp-content/uploads/2014/04/sea-wallpaper-10314-10681-hd-wallpapers-848x477.jpg);}
</style>

And your body code like this:

<script>
$(function () {
    $("#tab1").click(function () {
        $("#bg-img").removeClass("bg1");
    });
});
$(function () {
    $("#tab2").click(function () {
        $("#bg-img").addClass("bg1");
    });
});
</script>

That should do the trick.
If you have more than two tabs you will have to change the jquery slightly, so that it will not just remove a class but remove one and add another. You ll have to define every class within the css (every bg image gets another class).

Should work, if not feel free to reply.

You can see it live here:
http://daniels-workaround-site.webflow.io/

Regards
Daniel


#8

Thanks, this works very good.

best
kai


#9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.