Bootstrap toggle sidebar point the active tab from outside tab

0
votes

I am using bootstrap toggle sidebar to my website. I am using nav-pills inside the sidebar. I want to active and point the exact tab follow home,profile,contact. If I click home nav exactly point to the home tab panel after open sidebar.

I have tried below script.

$(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");             
    });
});

My code here

screenshot for ref:

enter image description here

1
javascriptjquerytwitter-bootstrap

1 Answers

1
votes

I'll quickly go through the main problems of your question, hoping it will help you (and maybe others, too) ask better questions in the future.

1. Your question is not answerable

It simply doesn't qualify as a good StackOverflow question. In here, you cannot use a live project as a Minimal, Complete, and Verifiable example. The example needs to be part of your question and it needs to be minimal. For the simple reason that, when answered, you shall update the project and it will no longer be relevant for the question, which means it will stop being helpful for anyone having a similar issue. Which directly translates into you not wanting to help other users. If you don't want to help other users, why would other users want to help you?

2. You're missing the function parameter

In your 

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

e is not defined. It's supposed to be the function parameter (a.k.a. as event, or e):

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

3. You have invalid markup

Another big problem with your code is you have duplicate ids in your page. You can't have more than one single element in the page having the same id. When you need to assign behavior or styling to more than one element, use classes, not ids.

4. You modified the library's markup

Going further down, even if you fix the missing parameter and duplicated ids problems, you'll quickly find out e.target does not have a hash property, because the target is no longer an anchor tag <a>, but a <span>. Why? Most likely, you changed it, as you thought it looks better as a <span>, wrapped in a <button>. Maybe it does, but you could easily make it look the same by applying btn btn-info classes to the <a>, without breaking the library's functionality.

5. You haven't read the documentation

What's nice about Bootstrap Sidebar is that, unlike for other, more shady libraries, which just provide you with some code and not explain everything, for this one you can find a quality, highly-detailed tutorial on how it all works and what your options in implementing it are.

That tutorial was written for you. After you read and apply it, if you still have trouble using the library, update your question, outlining what you did to make it work, what is the expected result and making sure the included mcve features the problem you have trouble finding a solution for.

For more details on how to ask good questions on SO, read How to ask.