Bootstrap 切换侧边栏从外部选项卡指向活动选项卡答案

【问题标题】：Bootstrap toggle sidebar point the active tab from outside tabBootstrap 切换侧边栏从外部选项卡指向活动选项卡
【发布时间】：2019-01-02 23:25:54
【问题描述】：

我正在使用引导切换侧边栏到我的网站。我在边栏中使用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

参考截图：

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案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 的元素。当您需要为多个元素分配行为或样式时，请使用 classes，而不是 ids。

4。您修改了库的标记

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

5。您还没有阅读文档

Bootstrap 侧边栏的好处在于，与其他更阴暗的库不同，它只是为您提供一些代码而不是解释所有内容，对于这个，您可以找到一个高质量、高度详细的 tutorial 以了解这一切作品以及您实施它的选择是什么。

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

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

【讨论】：