引导程序切换侧边栏从外部选项卡指向活动选项卡

Question

我正在使用引导程序切换侧栏到我的网站。我在侧边栏中使用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 es，而不是 id s。

4。您修改了库的标记

再往前走，即使您解决了缺失的参数和重复的id问题，您也会很快发现e.target没有hash属性，因为目标不再是定位标记<a>，但<span>。为什么？您很有可能更改了它，因为您认为将其包裹在<span>中作为<button>看起来更好。也许可以，但是您可以通过将btn btn-info类应用于<a>来轻松使其外观相同，而不会破坏库的功能。

5。您尚未阅读文档

Bootstrap侧边栏的好处是，与其他更阴暗的库不同，该库仅为您提供一些代码，而没有解释所有内容，为此，您可以找到优质，详细的tutorial这一切都起作用，您在实现它时会选择什么。

该教程是为您编写的。阅读并应用它之后，如果仍然无法使用该库，请更新您的问题，概述使它起作用的工作，预期结果是什么，并确保包含的 mcve 可以解决此问题您很难找到解决方案。

---

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