장바구니에서 카테고리를 변경하기위한 탭 인터페이스가 있습니다. 클릭하면 활성 탭이 강조 표시되고 이전 탭은 정상으로 돌아갑니다. 사용자가 페이지를 방문 할 때 첫 번째 탭이 이미 선택되기를 원합니다. 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>
처럼 탭을 선택하지만 다른 탭을 클릭 할 때 강조 남아있다.