Question

我有一个标签式界面，用于更改购物车中的类别。单击时，活动选项卡会突出显示，之前的选项卡将恢复正常。我想在用户访问页面时已经选择了第一个选项卡。 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>

我尝试将class属性设置为tab-selected，如此

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

但是当我点击其他标签时它仍然会突出显示。

Answer 1

你应该看看jQuery UI Tabs。它更容易，您的JavaScript代码将更“可管理”。

Answer 2

这可能会有所帮助

Change an element's class with JavaScript

我猜当你在页面加载时突出显示第一个标签时，变量“selectedTab”仍为空

Answer 3

即使更改了标签，这也会有效。我使用了按钮元素作为标签，但是当你需要第一个元素时，它将适用于任何元素。

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

我想加载标签式购物车的第一个标签

3 个答案: