通过 javascript 在 <a> 标签内动态设置 bootstrap 数据切换

Question

我正在尝试根据输入在选项卡中动态创建数据表，到目前为止，我在创建数据表和选项卡时没有遇到任何问题。但是，当我单击选项卡时，我无法切换到我想要的数据。我可以像这样手动操作：

<a href="#tabTable2" data-toggle="tab" class="test"></a>

但是，我想通过javascript/jquery添加“data-toggle”属性，但找不到方法。任何人都知道如何解决这个问题或有任何解决方法吗？

这是我的代码：

        var tabHyperLink = document.createElement("a");
        tabHyperLink.href = "#tabTable"+x;
        tabHyperLink.innerHTML = "Hold "+x; 
        tabHyperLink.dataToggle = "tab"; //this doesn't work

Answer 1

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script
            src="https://code.jquery.com/jquery-3.6.0.js"
            integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
            crossorigin="anonymous"
        ></script>
    </head>

    <body>
        <p></p>
    </body>
    <script type="text/javascript">
        var X = 1;
        var anchor = jQuery("p").append("<a></a>");

        $(anchor)
            .find("a")
            .attr({ href: "#tabTable" + X, "data-toggle": "tab" })
            .html("Hold" + X);
    </script>
</html>

通过 javascript 在 <a> 标签内动态设置 bootstrap 数据切换

Set bootstrap data-toggle inside <a> tag dynamically through javascript

javascript

datatable

jquery

twitter-bootstrap