2011-02-16 2 views
0

장바구니에서 카테고리를 변경하기위한 탭 인터페이스가 있습니다. 클릭하면 활성 탭이 강조 표시되고 이전 탭은 정상으로 돌아갑니다. 사용자가 페이지를 방문 할 때 첫 번째 탭이 이미 선택되기를 원합니다. My Shopping Cart내 장바구니의 첫 번째 탭을로드하려고합니다.

<div class="tabs"> 
<button type="button" class="tab" onclick="selectTab(this);">Cleansers</button> 
<button type="button" class="tab" onclick="selectTab(this);">Toners</button> 
<button type="button" class="tab" onclick="selectTab(this);">Astringents</button> 
<button type="button" class="tab" onclick="selectTab(this);">Exfoliators</button> 
</div> 

<script type="text/javascript"> 
var selectedTab = null; 
function selectTab(tab) { 
tab.blur(); 
if (selectedTab) { selectedTab.className = 'tab'; } 
tab.className = 'tab-selected'; 
selectedTab = tab; 
// call ajax to load products 
} 
</script> 

난에 클래스 속성 설정 노력이

<button type="button" class="tab-selected" onclick="selectTab(this);">Cleansers</button> 

처럼 탭을 선택하지만 다른 탭을 클릭 할 때 강조 남아있다.

답변

1

null의 도움이 될 수 있습니다. 훨씬 쉽고 자바 스크립트 코드가 더 관리하기 쉽습니다.

0

탭이 변경된 경우에도 작동합니다. 탭에 버튼 요소를 사용했지만 첫 번째 요소가 필요할 때 요소에 대해 작동합니다.

<body onload="selectTab(document.getElementsByTagName('button')[0]);" >