javascript - Change Image on Active <li> -
I have a 2-tab content slider for the mobile section of my site. User & lt; Li & gt;
Clicks on linked image inside element and related content load I would like the image to change the color in the "active" position, so when a user clicks on it, a new image is loaded
This is only for mobile sites, please give the solution thank you all!
& lt; Div id = "tabs" class = 'tab no-screen no-i.e.' & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "# tab-1" & gt; & Lt; Img src = "img / mobile / bingo.png" width = "70" height = "70" alt = "super free bingo" /> gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "# Tab2" & gt; & Lt; Img src = "img / mobile / slots.png" width = "70" height = "70" alt = "super free logo" /> & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Div id = 'tab-1' class = "tab-box" & gt; & Lt ;? Php included 'include / sfb.php'; ? & Gt; & Lt; / Div & gt; & Lt; Div id = 'tab-2' class = "tab-box" & gt; & Lt ;? Php included 'include / sfsg.php'; ? & Gt; & Lt; / Div & gt; & Lt; / Div & gt;
If I correctly understood, when the user clicks on the image, then the image By changing that you have only two images, we can do the following:
Add a unique ID to your target images.
JavaScript onclick event for each image which will also reset other image.
$ ('# image-1'). Click (function () ($ (this) .attr ('src', 'img / mobile / newImage1.png'); $ (this). Parent (). Parent () .css ('background-color', 'White'); $ ('# Image-2'). Attr ('src', 'img / mobile / slots.png'); $ ('# image-2'). ). Click CSS ('background-color orange');}); $ ('# Image-2') (function () {$ (this) .attr ('src', 'img / mobile / newImage2.png ''; $ (This) .Parent () .Parent (.css ('background-color', 'white'); $ ('# image-1'). Attr ('src', 'img / mobile / ('Background color', 'orange');});
Div>
Comments
Post a Comment