Note that there are some explanatory texts on larger screens.

plurals
  1. POSwap image classes on click of an a tag. jQuery
    primarykey
    data
    text
    <p>I am working with jQuery and attempting to swap an image Style on click. I am using .tabs for a multi-page form and would like to call an event to swap out an image class when that page is clicked. Kind of like A form process complete status. Like breadcrumbs type. My code is as follows. Any help towards the right direction would be very much appreciated. -Thanks</p> <p>JS: </p> <pre><code>$(function () { $("#nav-ul li a").on("click", function (e) { e.preventDefault(); $('img#no-1').removeClass("nav-number"); $(this).children('img').addClass("nav-number-active") }); }); </code></pre> <p>HTML:</p> <pre><code> &lt;div id="nav-Container"&gt; &lt;ul id="nav-ul"&gt; &lt;li&gt; &lt;a href="#page-1" class="nav-a-link"&gt;General Information &lt;img src="images/no-images/img-no-1.png" id="no-1" class="nav-number" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#page-2" class="nav-a-link"&gt;Setpoints &lt;img src="images/no-images/img-no-2.png" id="no-2" class="nav-number" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#page-3"&gt;Call Flow Structure &lt;img src="images/no-images/img-no-3.png" id="no-3" class="nav-number" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="#page-4"&gt;Summary &lt;img src="images/no-images/img-no-4.png" id="no-4" class="nav-number" /&gt; &lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>StyleSheet:</p> <pre><code>.nav-number{ margin:0px; float:right; padding:10px 0px 0px 13px; opacity:0.4; border:0px; } .nav-number-active{ margin:0px; float:right; padding:10px 0px 0px 13px; border:0px; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload