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

Popular posts from this blog

Member with no value in F# -

java - Joda Time Interval Not returning what I expect -

c# - Showing a SelectedItem's Property -