javascript - Bootstrap 切换侧边栏从外部选项卡指向事件选项卡

Question

我正在使用 Bootstrap 切换侧边栏到我的网站。我在侧边栏内使用 nav-pills 。我想激活并指向主页、个人资料、联系人之后的确切选项卡。如果我单击主页导航，则在打开侧边栏后精确指向主页选项卡面板。

我尝试过下面的脚本。

$(document).ready(function () {   
    $('#dismiss, .overlay').on('click', function () {
        $('#sidebar').removeClass('active');
        $('.overlay').removeClass('active');
    });

    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').addClass('active'); 
        var tab = e.target.hash;
            $('.tab-content .tab-pane' + tab + '"]').tab("active");             
    });
});

我的代码here

引用截图:

Answer 1

我将快速浏览您问题的主要问题，希望它能帮助您(也许还有其他人)将来提出更好的问题。

1。您的问题无法回答

这根本不符合 StackOverflow 的好问题。在这里，您不能将实时项目用作 Minimal, Complete, and Verifiable example 。该示例必须是您问题的一部分，并且必须最少。原因很简单，当得到答案时，您应更新项目，它将不再与问题相关，这意味着它将不再对任何有类似问题的人有帮助。这直接意味着您不想帮助其他用户。如果您不想帮助其他用户，其他用户为什么要帮助您？

2。您缺少函数参数

在你的

...).on('click', function () {
        ...
        var tab = e.target...

e没有定义。它应该是函数参数(又名 event 或 e ):

...).on('click', function (e) {
        ...
        var tab = e.target...

3。您的标记无效

您的代码的另一个大问题是您的页面中有重复的 ID。页面中不能有多个具有相同 id 的元素。 。当您需要为多个元素分配行为或样式时，请使用class，而不是id。

4。您修改了库的标记

再往下看，即使你修复了缺少参数和重复的 ids 问题，你也会很快发现 e.target没有 hash属性，因为目标不再是 anchor 标记 <a> ，但是 <span> 。为什么？最有可能的是，您更改了它，因为您认为 <span> 看起来更好。 ，包裹在 <button> 中。也许确实如此，但您可以通过应用 btn btn-info 轻松使其看起来相同类(class)到 <a> ，而不破坏库的功能。

5。您还没有阅读文档

Bootstrap Sidebar 的优点在于，与其他更加可疑的库不同，它们只是为您提供一些代码而不是解释所有内容，对于这个，您可以找到高质量、高度详细的 tutorial关于它是如何运作的以及您在实现它时的选择是什么。

该教程是为您编写的。阅读并应用它后，如果您在使用该库时仍然遇到问题，请更新您的问题，概述您为使其工作所做的工作，预期结果是什么，并确保包含的 mcve 能够解决问题您很难找到解决方案。

<小时/>

有关如何在 SO 上提出好问题的更多详细信息，请阅读 How to ask .