Note that there are some explanatory texts on larger screens.

plurals
  1. POhasClass if statement for navigation
    primarykey
    data
    text
    <p>first post here so bear with me!</p> <p>I am using the jquery ui tabs plugin to create a gallery and i want to have a little arrow slide left and right to show the user which gallery is being shown:</p> <p>the code i'm using is this:</p> <pre><code>&lt;script&gt; if ($('#wedding-btn').hasClass('ui-state-active')) { $('.nav-selector').css('left', '5px'); } else if ($('#portrait-btn').hasClass('ui-state-active')) { $('.nav-selector').css('left', '125px'); } else if ($('#landscape-btn').hasClass('ui-state-active')) { $('.nav-selector').css('left', '255px'); } else if ($('#blackandwhite-btn').hasClass('ui-state-active')) { $('.nav-selector').css('left', '410px'); } &lt;/script&gt; </code></pre> <p>here is a link to show what i'm talking about: <a href="http://www.maxhenchman.co.uk/oh/latest2/" rel="nofollow">http://www.maxhenchman.co.uk/oh/latest2/</a></p> <p>I've looked at some other articles on here and the code above seems like it should work...but i'm pretty new to jquery so i'm probably wrong.</p> <p>any help would be great!</p> <p>Thanks,</p> <p>Max</p> <p>EDIT for johnny:</p> <pre><code>&lt;script type="text/javascript"&gt; $(document).ready(function() { $( "#tabs" ).tabs({ show: { effect: "fade", duration: 400 }, hide: { effect: "fade", duration: 800 } }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function() { $('#wedding-btn').click(function(){ if($(this).hasClass('ui-state-active')) $('.nav-selector').css('left', '5px'); }); $('#portrait-btn').click(function(){ if($(this).hasClass('ui-state-active')) $('.nav-selector').css('left', '125px'); }); $('#landscape-btn').click(function(){ if($(this).hasClass('ui-state-active')) $('.nav-selector').css('left', '255px'); }); $('#blackandwhite-btn').click(function(){ if($(this).hasClass('ui-state-active')) $('.nav-selector').css('left', '410px'); }); }); &lt;/script&gt; </code></pre>
    singulars
    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.
    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