Проблем с една форма под мобилни устройства

[vinsbg]

Здравейте,

Имам форма за Вход/Регистрация, която на десктоп няма проблем и се суапва коректно. Под мобилни устройства обаче не иска и когато натисна регистрация ме мята на индекс страницата. Това са бутоните на формата

<div class="row">				
	<div class="col-xs-6">
			<a href="#" class="active" id="login-form-link">Вход</a>
	</div>
	<div class="col-xs-6">
			<a href="#" id="register-form-link">Регистрация</a>
	</div>
</div>

А това и е функцията

<script>
$(function() {

    $('#login-form-link').click(function(e) {
		$("#login-form").delay(100).fadeIn(100);
 		$("#register-form").fadeOut(100);
		$('#register-form-link').removeClass('active');
		$(this).addClass('active');
		e.preventDefault();
	});
	$('#register-form-link').click(function(e) {
		$("#register-form").delay(100).fadeIn(100);
 		$("#login-form").fadeOut(100);
		$('#login-form-link').removeClass('active');
		$(this).addClass('active');
		e.preventDefault();
	});

});    
    
</script>

Ето и демо на формата. При натискане на Вход или регистрация формата се суапва:
https://jsfiddle.net/yfy6c3Le/1/

 

[uphero]

Защо не ползваш табовете?
http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

 

[vinsbg]

Защо не ползваш табовете?
http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

Защото не съм се замислял да ползвам табове

Благодаря :?: