javascript - Change span on click Jquery -

i've code

	$('a').click(function() {  		$('a span').first().addclass('hide');   		$('a span:nth-child(2)').removeclass('hide');                  $('a span:nth-child(2)').addclass('display');  	});

.hide {    display:none;   }    .display {    display:block;   }

<a href="#">    <span>hello</span>    <br>    <span class="hide">world</span>  </a>

when click on link want first span hide , 2nd span appears.

i want multiple times (click on link multiples times , have same result).

i try jquery code

i toggle classes , have prevent default on link doesn't try leave page.

$('a').click(function(e) {     e.preventdefault();     $('a span').toggleclass('hide show'); }); 

here work demo