I'm trying to navigate through tabs in bootstrap 2.3.2 using dropdown menu links and buttons.
I'm able to navigate to different tabs using links in the dropdown menu, however when I navigate back to the tab with the dropdown menu, the links in the dropdown seem to have been disabled.
Demo
<div class="modal-body chart-edit-body">
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab-settings" data-toggle="tab">
Settings
</a>
</li>
<li>
Customize
</li>
</ul>
<div class="tab-content" id="edit-chart-filter">
<div class="tab-pane active" id="tab-settings">Settings Tab</div>
<div class="tab-pane" id="tab-custom">Customize Tab
<div id="filters-list-custom" class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Go to Hidden tabs
<span class="caret"></span>
</a>
<ul class="dropdown-menu align-left-ul">
<li>
Hidden Tab 1
Hidden Tab 2
Hidden Tab 3
</li>
</ul>
</div>
</div>
<div class="tab-pane" id="tab-hidden1">
Hidden Tab 1
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
<div class="tab-pane" id="tab-hidden2">
Hidden Tab 2
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
<div class="tab-pane" id="tab-hidden3">
Hidden Tab 3
<a href="#tab-custom" role="button" class="btn">
Back to dropdown menu
</a>
</div>
</div>
</div>
Any ideas as to why this is happening?
You put all your links in one <li> tag. They must be seperate tags
<li> Hidden Tab 1 </li>
<li> Hidden Tab 2 </li>
<li> Hidden Tab 3 </li>
Also remove the active class once clicked. If you not remove, after returning to dropdow the link you clicked will be active.
$(function () {
$('#edit-chart-filter a').click(function (e) {
e.preventDefault();
$('a[href="' + $(this).attr('href') + '"]').tab('show');
$(this).parent().removeClass('active');
})
});
Related
In my application, the navbar has upto 2 levels of submenu. My requirement is to change few features of a menu when either it is selected or any of its submenu (of any level) is selected. I have been given this code that does it in an ineffective way till date (ie) writing one function for every in navbar which will make all of its specific CSS/image changes. But I would like to find an effective way (mostly one method) which will perform all the CSS changes when required data is provided as input.
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 wrapper zeroPadding">
<nav id="sidebar">
<ul class="list-unstyled components">
<li class="firstEmptyDiv">
<div class="toggleBtnDiv" (click)="toggleBtn()">
<i class="fa fa-bars toggleButton" aria-hidden="true"></i>
</div>
</li>
<li>
<a routerLink="/dashboard" routerLinkActive="active">
<img class="iconImg" id="iconImg" src="/assets/images/dashboard_icon.svg" alt="Dashboard menu icon" />
<br>
<span class="textWrap" *ngIf="buttonColor">Dashboard</span>
</a>
</li>
<li class="nav nav-stacked" *ngIf="this.hasCompanyStructureAccess">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="borderColor"
[style.background-color]="color">
<img class="iconImg" id="iconImg" [src]="imgSrc" alt="Company structure menu icon" />
<span [style.color]="routerText" *ngIf="buttonColor" class="textWrap overflow-wrap">Company Structure</span>
<span [style.color]="caretColor" class="caret"></span>
</button>
<ul class="dropdown-menu slide">
<li *ngIf="this.dataService.hasViewLocationAccess">
<a routerLink="/location" routerLinkActive="active">Location</a>
</li>
<li *ngIf="this.dataService.hasViewBranchAccess">
<a routerLink="/branch" routerLinkActive="active">Branch</a>
<li *ngIf="this.dataService.hasViewRoleAccess">
<a routerLink="/role" routerLinkActive="active">Role</a>
</li>
<li *ngIf="this.dataService.hasViewDepartmentAccess">
<a routerLink="/department" routerLinkActive="active">Department</a>
</li>
<li *ngIf="this.dataService.hasViewDesignationAccess">
<a routerLink="/designation" routerLinkActive="active">Designation</a>
</li>
<li *ngIf="!needToShowFlag">
<a routerLink="ACL" (click)="ACL()" routerLinkActive="active">ACL</a>
</li>
</ul>
</div>
</li>
<li class="nav nav-stacked">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" id="dropdown-toggle" type="button" data-toggle="dropdown" [style.border-left]="leaveModuleborderColor"
[style.background-color]="leaveModulecolor">
<img class="iconImg" [style.padding]="iconImgPadding" id="iconImg" [src]="leaveModuleSrc" alt="Leave menu icon" />
<span class="textWrap" [style.color]="leaveRouterText" *ngIf="buttonColor">Leave</span>
<span [style.color]="caretColorLeave" class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-submenu" id="submenuList" (click)="openSecondList()" (mouseover)="openSecondList()" [style.display]="submenuListDisplay">
<a class="test" tabindex="-1" id="leaveManagementlist">Configuration<span class="caret"></span>
</a>
<ul class="dropdown-menu" *ngIf="openSecondListFlag">
<li *ngIf="this.dataService.hasViewGeneralConfigurationAccess">
<a tabindex="-1" routerLink="generalconfiguration" (click)="generalConfiguration()" routerLinkActive="active">General Configuration</a>
</li>
<li *ngIf="this.dataService.hasViewListLeaveAllocationAccess">
<a tabindex="-1" (click)="listLeaveAllocation()" routerLinkActive="active">Modify Leave Allocation</a>
</li>
</ul>
</li>
<li class="applyLeaveTab">
<a (click)="applyLeave()">Apply Leave</a>
</li>
</ul>
</div>
</li>
</ul>
</nav>
<div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" id="content">
<router-outlet></router-outlet>
</div>
In this code excerpt, when I select a submenu say 'Location', then its main menu 'Company Structure' should be changed with the following CSS values.
1) A different image should be loaded for this menu
2) background color to be changed
3) Color of caret symbol to be changed
4) A different colored border-left to be included
5) Background color of 'Location' submenu should be changed.
Similar CSS change should happen when clicking on 2 level submenu too like 'General configuration' in the example.
Any suggestions to come up with an effective way to meet this requirement is welcome. Thank you!
I want when I click link and smoot-scrool to down then collapse div and open tab with Javascript.
This code is scrolled
<a data-scroll href="#smootScrool" onclick="callMyFunction('tab-1')"><h4 >Scrool, collapse and open tab authomatic</h4></a>
to here and with handle I can collapse and open tap, but I wan't do it authomatic with Javascript. How can I do it?
<div class="panel-heading"><span id="smootScrool" "> Scrolled Here!</span>
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion2" href="#collapse-9" class="collapsed" aria-expanded="false">
<i class="fa fa-angle-down control-icon"></i>
<i class="fa fa-universal-access"> Qeydiyyatsız müraciət</i>
</a>
</h4>
</div>
<div id="collapse-9" class="panel-collapse collapse" aria-expanded="false">
<div class="panel-body">
<div class="row">
<div class="col-md-12 page-content ">
<div class="hr1 margin-top"></div>
<div class="tabs-section">
<!-- Nav Tabs -->
<ul class="nav nav-tabs center-block">
<li class="active"><i class="fa fa-question"></i>TAB 1</li>
<li><i class="fa fa-envelope"></i>TAB 2</li>
<li><i class="fa fa-briefcase"></i>TAB 3</li>
<li><i class="fa fa-legal"></i>TAB 4</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!-- Tab Content 1 -->
<div class="tab-pane fade in active" id="tab-1">
<div class="row">
</div>
</div>
1. Scrool to div (this working)
2. Authomatic collapse div (How can I do?)
3. Authomatic open tab (How can I do?)
Please suggestion best way and code example. Thanks
See the official bootstrap documentation about that, could be helpful or at least give you an better idea how to find a solution: http://getbootstrap.com/javascript/#tabs
Also Jquery UI: https://jqueryui.com/tabs/#mouseover
I hope that these links can be useful
I am using bootstrap 3 tabs in my mvc view. I want to render another partial view on tab change. Here is the code for the tab
<ul class="nav nav-tabs">
<li class="active" id="studentList">
<a href="#tab_1_1" data-toggle="tab" aria-expanded="true">
Student List </a>
</li>
<li class="" id="studentAddEdit">
<a href="#tab_1_2" data-toggle="tab" aria-expanded="false">
Student Add/Edit </a>
</li>
<div class="tab-content">
<div class="tab-pane fade active in" id="tab_1_1">
<p>
#Html.Action("StudentList","Student")
</p>
</div>
<div class="tab-pane fade" id="tab_1_2">
<p>
#Html.Action("StudentAddEdit","Student", new {id=Model.StudentId})
</p>
</div>
It renders the studentAddEdit view on view load. I want to render studentAddEdit view again when the user changes the tab and selects the studentAddEdit tab. Any solution suggested? I am currently doing it with jquery but not succeeding.
First of all slight changes in your html like adding a class to your anchor tags and adding extra data-* attribute to the same and the you can render partial view through jquery as below:
<ul class="nav nav-tabs">
<li class="active" id="studentList">
<a href="#tab_1_1" class="tbs" data-info="stdlist" data-toggle="tab" aria-expanded="true">
Student List </a>
</li>
<li class="" id="studentAddEdit">
<a href="#tab_1_2" data-toggle="tab" class="tbs" data-info="stdaddedit" aria-expanded="false">
Student Add/Edit </a>
</li>
</ul>
Your JS would be something like below:
$('.tbs').on('click',function(){
var info=$(this).data('info');
switch(info)
{
case 'stdlist':$('#tab_1_1 p').load('/Student/StudentList'); //Controller method which returns partial view
break;
case 'stdaddedit':$('#tab_1_2 p').load('/Student/StudentAddEdit');//Controller method which returns partial view
break;
//Add cases if you want
default:break;
}
});
I have a dropdown that contains a div which contains a dropdown of its own. As soon as I click the inner dropdown, the parent dropdown closes. How to prevent the parent dropdown from closing ? And how to solve the same problem for multiple nested dropdowns ?
Code:
<div class="dropdown selectDropdownDiv">
<a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
<div class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel" id="keywordDropdown">
<div class="dropdown selectDropdownDiv">
<a data-toggle="dropdown" href="#" class="btn selectDropdown">--<span class="caret pull-right"></span></a>
<ul class="dropdown-menu keep_open" role="menu" aria-labelledby="dLabel">
<li class="checkbox marginl5">
<label>
<span class="checkLabel">Source X</span><input type="checkbox">
</label>
</li>
<li class="checkbox marginl5">
<label>
<span class="checkLabel">Source X</span><input type="checkbox">
</label>
</li>
</ul>
</div>
</div>
</div>
I am using Twitter Bootstrap. Any help would be appreciated.
This should work. It stop the propagation of the click event to the bootstrap event that controls hiding the menu.
$("#parent-element").on("click", ".dropdown-menu", function (e) {
$(this).parent().is(".open") && e.stopPropagation();
});
I'm having an issue where a dropdown menu in my navbar works on a desktop, but doesn't expand in mobile.
Here is the live site: http://launchsummer.org/
If you shrink the page to mobile-sized, you'll see that the "launch summer" dropdown does not expand.
Here is the code for the navbar:
<!-- Navigation -->
<!-- Note: navbar-default and navbar-inverse are both supported with this theme. -->
<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="[[~1]]">
<img src="assets/logo-nav#2x.png" class="img-responsive" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li>
Home
</li>
<li>
About Us
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Launch Summer <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><font color="#080A21">Program Details</font></li>
<li><font color="#080A21">FAQ</font></li>
<li><font color="#080A21">Launch Alumni</font></li>
<li><font color="#080A21">Past Companies</font></li>
<li role="separator" class="divider"></li>
<li><font color="#080A21">Apply!</font></li>
</ul>
</li>
<li>
LaunchX
</li>
<li>
Launch Clubs
</li>
<li>
Blog
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
In your vitality.js, at line 23 to 26, you have this function :
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li a').click(function() {
$('.navbar-toggle:visible').click();
});
So when we click on any item, the menu is closed. You can do this to prevent the menu from closing when you click on a dropdown menu.
// Closes the Responsive Menu on Menu Item Click
$('.navbar-collapse ul li:not(.dropdown) a').click(function() {
$('.navbar-toggle:visible').click();
});
so dropdown Opened but Same time Closing beCaUse inside Link have href="#" delete dropdown Child a elements href attribute