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:
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.
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?
In your
...).on('click', function () {
...
var tab = e.target...
e
is not defined. It's supposed to be the function parameter (aka as event
, or e
):
...).on('click', function (e) {
...
var tab = e.target...
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 class es, not id s.
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.
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.