jquery - Change individual button state -

-

i have following uses clicks , jquery fade display div when button clicked , change state of button....

http://jsfiddle.net/ttj9j/5/

html

<a class="link" href="#" data-rel="content1"><img src="http://i.imgur.com/vi1klp9.png"></a> <a class="link" href="#" data-rel="content2"><img src="http://i.imgur.com/u1sbure.png"></a> <a class="link" href="#" data-rel="content3"><img src="http://i.imgur.com/u1sbure.png"></a> <a class="link" href="#" data-rel="content4"><img src="http://i.imgur.com/u1sbure.png"></a> <a class="link" href="#" data-rel="content5"><img src="http://i.imgur.com/u1sbure.png"></a>  <div class="content-container">     <div id="content1">this test content part 1</div>     <div id="content2">this test content part 2</div>     <div id="content3">this test content part 3</div>     <div id="content4">this test content part 4</div>     <div id="content5">this test content part 5</div> </div>

css

.content-container {     position: relative;     width: 400px;     height: 400px; } .content-container div {     display: none;     position: absolute;     top: 0;     left: 0;     right: 0;     bottom: 0; }

jquery

$(".link").click(function(e) {       e.preventdefault();       $('.content-container div').fadeout('slow');       $('#' + $(this).data('rel')).fadein('slow');       $(".link img").attr("src", "http://i.imgur.com/u1sbure.png");       $(this).find("img").attr("src", "http://i.imgur.com/vi1klp9.png"); });  $( document ).ready(function() {     $(".link")[0].click();  });

this works great trying have different button / pressed button image each of 5 buttons. can help?

demo

function handler1() {     $(this).find("img").attr("src", "http://i.imgur.com/vi1klp9.png");     $(this).one("click", handler2); }  function handler2() {     $(this).find("img").attr("src", "http://i.imgur.com/u1sbure.png");     $(this).one("click", handler1); } $(".link").one("click", handler1);

another demo --> css approach through class

removed img tag used a tags

html

<a class="link active" href="#" data-rel="content1"></a>  <a class="link" href="#" data-rel="content2"></a>  <a class="link" href="#" data-rel="content3"></a>  <a class="link" href="#" data-rel="content4"></a>  <a class="link" href="#" data-rel="content5"></a>

css

.link {     content:url("http://i.imgur.com/vi1klp9.png");  } .active {     content:url("http://i.imgur.com/u1sbure.png"); }

js

$(".link").click(function () {     $(this).toggleclass('active'); });

after op's comment

demo

js

 $(".link").click(function (e) {      e.preventdefault();      $('.content-container div').fadeout('slow');      $('#' + $(this).data('rel')).fadein('slow');      $('.link').removeclass('active');      $(this).toggleclass('active');  });   $(document).ready(function () {      $(".link")[0].click();  });

css

.link {     content:url("http://i.imgur.com/u1sbure.png"); } .active {     content:url("http://i.imgur.com/vi1klp9.png"); }

Comments

Post a Comment

Popular posts from this blog

java - Run a .jar on Heroku -

-
i trying run .jar file on heroku, , can't find instructions anywhere on how this. have read wants me compile uploading heroku. possible, , if is, how this? if helps, trying run minecraft craftbukkit server, , don't have pom.xml file yet. you didn't provide details i'll try give , people reaches question way it. first of all, create heroku account , create heroku application (assumed have done that). second, need generate application jar , upload heroku. so, open terminal , install heroku cli (assuming unix terminal): $ sudo npm install -g heroku-cli you need have npm , nodejs installed, can check link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04 once done that, can use npm update node version acceptable heroku-cli: $ sudo npm install -g n $ sudo n 7.10.0 and run: $ sudo npm install -g heroku-cli in order deploy jars, need install deploy plugin: $ sudo heroku plugins:install heroku-cli-deploy ...
Read more

java - Jtable duplicate Rows -

-
Image
when add new rows in jtable duplicate rows many times this method update jtable public final void tableaucomande(){ ((defaulttablemodel)tabcommande.getmodel()).getdatavector().clear(); session s=hibernateutil.getsessionfactory().opensession(); criteria cr1= s.createcriteria(commande.class); list <commande> lcs=cr1.list() ; criteria cr2= s.createcriteria(lignecommande.class); list <lignecommande> lck=cr2.list() ; if(lcs.size()!=0 && lck.size()!=0) { (commande lc:lcs) { for(lignecommande lig:lck){ ((defaulttablemodel)tabcommande.getmodel()).addrow(new object[]{ lc.getid_cmd(),lc.getnumcmd(),lc.getdate_cmd(),lc.getclient().getnomprenom(), lig.getproduit().getlib_prd(),lig.getquantite(),lig.getproduit().getid_prd() }); } } // tabcommande.setrowselectioninterval(tabcommande.getrowcount()-1,tabcommande.getrowcount()-1); } } this code add add data rows displaye...
Read more

validation - How to pass paramaters like unix into windows batch file -

-
i need pass various parameters .cmd file unix format file.cmd -configuration=value -source=value -flag but, try this: startlocal @echo off cls setlocal set cmdline=%* set configuration= set source= set badargs= set validation= goto main :splitargs echo splitargs(%*) if "%*" neq "" ( /f "tokens=1,2,* delims== " %%i in ("%*") call :assignkeyvalue %%i %%j & call :splitargs %%k ) goto :eof :assignkeyvalue echo assignkeyvalue(%1, %2) if /i %1==-configuration ( set configuration=%2 ) else if /i %1==-source ( set source=%2 ) else ( rem append unrecognised [key,value] badargs echo unknown key %1 set badargs=%badargs%[%1, %2] ) goto :eof :validate echo validating set validation=fail if defined configuration ( echo -configuration ok if defined source ( echo -source ok if not defined badargs ( set validation=success ) ) ) goto :eof :main cl...
Read more