I want to load the first tab of my tabbed shopping cart
I have a tabbed interface for changing categories in a shopping cart. The active tab is highlighted when clicked, and the previous tab goes back to normal. I want the first tab to be already selected when the user visits the page. 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>
I tried setting the class property to tab-selected like this
<button type="button" class="tab-selected" onclick="selectTab(this);">Cleansers</button>
but it remains highlighted when I click the other tabs.
You should take a look at jQuery UI Tabs. It is much easier and your javascript code would be more "manageable".
this might help
Change an element's class with JavaScript
I guess when you highlighting first tab on page load, variable "selectedTab" is still null
This will work even if the tabs are changed. I used button elements for tabs, but it will work for any element when you need the first one.
<body onload="selectTab(document.getElementsByTagName('button')[0]);" >
加载中,请稍侯......
精彩评论