Question

我有一个带标签样式视图的页面，如下所示：http://demos.inspirationalpixels.com/Tabs-with-HTML-CSS-&-jQuery/

我的问题是我在每个选项卡上都有表单，在页面上的选项卡之外我有一个按钮可以重置所有表单和提交，但我想要一个重置当前顶部选项卡上的表单。

所以我认为最好的方法也是如此，所以当单击选项卡时，会将值发送到选项卡表单重置脚本，以便它知道在单击时要重置哪个表单。

表单中包含“tabf1”，“tabf2”等ID，因此我只需要单击选项卡即可发送选项卡号。

我尝试了什么：

<ul class="tab-links">
    <li onclick="setTabNo(this)" id="1"  class="active">    
    <a href="#tab1">Basic</a></li>

    <li onclick="setTabNo(this)" id="2" ><a href="#tab2">Earnings</a></li>

    <li onclick="setTabNo(this)" id="3" ><a href="#tab3">Deductions</a></li>

    <li onclick="setTabNo(this)" id="4" ><a href="#tab4">Taxes</a></li>
</ul>


function resetAll() {
    document.getElementById("tabf1").reset();
    document.getElementById("tabf2").reset();
    document.getElementById("tabf3").reset();
    document.getElementById("tabf4").reset();
}

var tabNo;
function setTabNo() {
    var tabNo = this.id;
}

function resetTab() {
    document.getElementById("tabf"+tabNo).reset();
}

我已尝试使用on click和id作为aswell的一部分，这基于下面的答案，但仍然不适合我。

该变量在另一个函数中被调用，但应该没问题，因为我首先在两个函数之外定义它。

解决：

遗憾的是没有得到id，但我只是将id值放在onlick的函数括号中。

所以：

onclick="setTabNo('2')"

然后：

function setTabNo(idv) {
    tabNo = idv;
}

Answer 1

您根本不需要传递ID，它已作为点击元素的属性提供：

function setTab2(element) {
    var id = element.id;
    ...
 }

然后将onclick属性更改为onclick="setTab2(this)"。后者确保单击处理程序传递对单击元素的引用。

请注意，最好不要使用内联事件处理程序：

$('#2').on('click', setTab2);

注意：数字ID仅在HTML5中允许，并且在CSS3中不允许。

单击元素时将元素ID传递给js函数

1 个答案: