테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 로드 함수 질문요 채택완료

오늘도화이팅 6년 전 조회 2,407

구글링하여 아래 select방식 탭을 적용완료하였구요

 

혹시 아래 제이쿼리함수에서 로딩함수를 넣고싶을경우에는 어떻게 해야할까요?!

 

* 탭버튼을 클릭하면 tab-contents부분에 로딩구현후 내용이 보이게 하고싶어요

로딩아이콘은 있어요!

 

 

 

</p>

<pre>
<code>$(document).ready(function() {
	var $tabButtonItem = $('#tab-button li'),
	    $tabSelect = $('#tab-select'),
	    $tabContents = $('.tab-contents'),
	    activeClass = 'is-active';

	$tabButtonItem.first().addClass(activeClass);
	$tabContents.not(':first').hide();

	// button
	$tabButtonItem.find('a').on('click', function(e) {
		var target = $(this).attr('href');

		$tabButtonItem.removeClass(activeClass);
		$(this).parent().addClass(activeClass);
		$tabSelect.val(target);
		$tabContents.hide();
		$(target).show();
		e.preventDefault();
	});

	// select
	$tabSelect.on('change', function() {
		var target = $(this).val(),
		    targetSelectNum = $(this).prop('selectedIndex');

		$tabButtonItem.removeClass(activeClass);
		$tabButtonItem.eq(targetSelectNum).addClass(activeClass);
		$tabContents.hide();
		$(target).show();
	});
});</code></pre>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트

로딩이미지

 

~~~~~~~~~~~~~~

~~~~~~~~~~~~~~   setTimeout(function() {         $("#loading").show();     },200);

  $(target).show();

$("#loading").hide(); 참고만하세요 방법은 많을듯합니다..

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인