Question

我在DataTables.js中使用了一些选项卡。不知道它是否与DataTables.js有关，但是每当我扩展内容以使滚动打开并且将Primary Tab切换到任何其他标签然后再切换回Primary Tab时，它就会向下滚动。我想让当前状态的用户将其保留在其中或滚动到顶部。我猜这是因为在href中使用了#Tab，并且将用户带到了该链接。

我的第二个问题是，如果我在顶部定义选项卡，而该代码中未定义该选项卡，则会造成问题。单击后，它就无法看到任何内容而中断。有没有办法防止这种行为？我知道我应该创建标签页眉和标签页内容，但这是由用户动态生成的。如果用户在顶部定义标题，而忘记添加标签内容，则需要我自己伪造它们。但是也许有更好的方法可以做到这一点？

相关标签的定义：

        <div>
            <ul class="tab-nav">
                <li><a class="button active" href="#Tab-joawgvms">Test </a></li>
                <li><a class="button" href="#Tab-p2zw875o">Test 5555 </a></li>
                <li><a class="button" href="#Tab-0j9eglkm">Test2 </a></li>
                <li><a class="button" href="#Tab-yg5lnrm9">Test3 </a></li>
                <li><a class="button" href="#Tab-lvhasgr5">Test4 </a></li>
                <li><a class="button" href="#Tab-tzdc7poq">Test5 </a></li>
                <li><a class="button" href="#Tab-9mhb8spv">Test2 </a></li>
            </ul>
        </div>

标签JS代码

        <script type="text/javascript">
            function openTab(evt, tabName) {
                // Declare all variables
                var i, tabcontent, tablinks;
                // Get all elements with class="tabcontent" and hide them
                tabcontent = document.getElementsByClassName("insideTab");
                for (i = 0; i < tabcontent.length; i++) {
                    tabcontent[i].style.display = "none";
                }
                // Get all elements with class="tablinks" and remove the class "active"
                tablinks = document.getElementsByClassName("tablinks");
                for (i = 0; i < tablinks.length; i++) {
                    tablinks[i].className = tablinks[i].className.replace(
                        " is-active",
                        ""
                    );
                }
                // Show the current tab, and add an "active" class to the link that opened the tab
                try {
                    document.getElementById(tabName).style.display = "block";
                } catch {
                    // This error happens when someone forgot addng new TABS with proper names
                    // Therefore style wouldn't exits on it.
                }
                evt.currentTarget.className += " active";
            }
        </script>

完整的HTML：https://github.com/EvotecIT/PSWriteHTML/blob/master/Examples/Example10/Example10.html

单击时，“ HTML选项卡”向下滚动内容

0 个答案: