The bootstrap navigation bar below is malfunctioning. The 'home', 'message', and 'public1' tabs change to the desired deep blue background when clicked.
Specifically, the public2, public3, public4, and register tabs only give a shadow background when clicked. The problem with public2, public3, andpublic4is that clicking on them causespublic1to turn deep blue, while the selected tab gets a shadow background. Similarly, whenregisteris clicked, theregister` button is shadowed, but everything else has a white background.
The desired effect is for the chosen/active tab to be deep blue. What specific changes need to be made to the code below to get any selected tab to be deep blue?
<ul class="nav nav-pills" role="tablist">
<li ng-class="{active:tab('home')}">home</li>
<li ng-class="{active:tab('message')}">message</li>
<li ng-class="{active:tab('public1')}">public1</li>
<li ng-class="{active:tab('public2')}">public2</li>
<li ng-class="{active:tab('public3')}">public3</li>
<li ng-class="{active:tab('public4')}">public4</li>
<li ng-class="{active:tab('register')}">register</li>
<li ng-show="authenticated2()">logout</li>
</ul>
The tab() method in the navigation.js controller is:
$scope.tab = function(route) {
return $route.current && route === $route.current.controller;
};
Related
I have some list items which are treated as Tabs in my UI. I also have a 'next' button under every tab and last tab have a 'finish' button. I need to move to next tab when i clicked on 'Next' button. I am working on an Angular2 project with typescript version 2.3.4. So i need some typescript code to work on button click.
While searching, i got some jquery code like,
$('.nav-tabs > .active').next('li').find('a') from how to display next bootstrap tab on button click.
I tried it in my button click(.ts file) and it works!. But i am not sure about the using of jquery in my project. Is it possible to get the element(html) in its typescript file? Or is this is the good possible way to do this?
My list is like,
<div class="row">
<ul class="nav nav-tabs bg-white">
<li class="active"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
Thanks in advance!
I would do something like this
page.ts
//declare 3 variables
isT1Active:boolean = true;
isT2Active:boolean = false;
isT3Active:boolean = false;
...
activate(elem){
//deactivate all first
this.isT1Active = false;
this.isT2Active = false;
this.isT3Active = false;
switch(elem){
case 't1':{this.isT1Active = true;break;}
case 't2':{this.isT2Active = true;break;}
case 't3':{this.isT3Active = true;break;}
}
}
page.html
<div class="row">
<ul class="nav nav-tabs bg-white">
<li [ngClass]="{'active': isT1Active}" (click)="activate("t1")"><a data-toggle="tab" href="#BasicInfo">BasicInfo</a></li>
<li [ngClass]="{'active': isT2Active}" (click)="activate("t2")" id="idAddInfoTab"><a data-toggle="tab" href="#AdditionalInfo">AdditionalInfo</a></li>
<li [ngClass]="{'active': isT3Active}" (click)="activate("t3")" id="idPlayerIdentity" class="active-border"><a data-toggle="tab" href="#PlayerIdentity">PlayerIdentity</a></li>
</ul>
</div>
And you can do same thing to the next button, In assume that each tab will have a next button
I would stay away from jQuery, but instead learn how to better use Angular to control the view. Basically, you want the active class in your template tab to be bound to your component selected model, so that when the selected model is updated, Angular will automatically apply the active class to the matching tab.
In your component, define the array that stores the tab info and define a selectedTab that refers to the specific tab that should be active:
export class AppComponent {
tabs = [
{id:'idBasicInfo', href:'...',label:'BasicInfo'},
{id:'idAddInfo', href:'...',label:'AdditionalInfo'},
{id:'idPlayerIdentity',href:'...',label:'PlayerIdentity'}
];
selectedTab = this.tabs[0]; // which is active by default
}
Then in your template, use these properties to drive the view:
<ul>
<li *ngFor="let t of tabs" [id]="t.id" [class.active]="t===selectedTab">
<a data-toggle="tab" [href]="t.href" (click)="selectedTab=t"> {t.label}} </a>
</li>
</ul>
When a tab is clicked, it will be made the selectedTab and its active class will be set.
I hope this is a good question and I am not just missing something total simple. I am very new to Angular 2 and I am always into saving code lines and time :)
I want to change the active css class of my tabs (I dont want to use router!) and I ended up with something like this:
activeTab: string;
switchActiveTab(newTab: string) {
this.activeTab = newTab;
}
<div class="buttonLine">
<ul class="nav nav-pills">
<li role="presentation" [ngClass]="{'active': activeTab === 'Example Tab 1'}" (click)="switchActiveTab('Example Tab 1');">
<a>Example Tab 1</a>
</li>
<li role="presentation" [ngClass]="{'active': activeTab === 'Example Tab 2'}" (click)="switchActiveTab('Example Tab 2');">
<a>Example Tab 2</a>
</li>
</ul>
</div>
So I had to declare the string value "Example Tab 1" three times in my HTML. This is pretty annoying, especially when I would have 5 or more tabs here.
Is it possible to avoid reapeating the expression "Example Tab 1" three times in my HTML? Or is it possible to do this kind of stuff in a more elegant way?
Method 1
To simplify the template code, you can declare the list of tabs in the component class:
public tabList: Array<string> = ["Example Tab 1", "Example Tab 2"];
and generate the li elements with the *ngFor directive:
<li *ngFor="let tab of tabList" [ngClass]="{'active': activeTab === tab}" (click)="switchActiveTab(tab);" role="presentation">
<a>{{tab}}</a>
</li>
Method 2
To keep the code more declarative, each item could refer to itself with a template reference variable instead of using the tab caption (as illustrated in this plunker):
<div class="buttonLine">
<ul class="nav nav-pills">
<li #tab1 [ngClass]="{'active': activeTab === tab1}" (click)="switchActiveTab(tab1);" role="presentation">
<a>Example Tab 1</a>
</li>
<li #tab2 [ngClass]="{'active': activeTab === tab2}" (click)="switchActiveTab(tab2);" role="presentation">
<a>Example Tab 2</a>
</li>
</ul>
</div>
The code would be modified accordingly:
activeTab: HTMLElement;
switchActiveTab(newTab: HTMLElement) {
this.activeTab = newTab;
}
I am trying to pass to bootstrap navbar an array in jade.
I already did this achievement:
block linkSelected
-var selected = 'index';
-var menu = { 'Sobre': '/sobre', 'blog': '/blog', 'Contato': '/contato' };
and in header:
#navbarCollapse.collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right
each val, key in menu
if selected === key
li.nav-item.active
a.nav-link(href=val, title=key)= key
else
li.nav-item
a.nav-link(href=val+'.html', title=key)= key
So i ended up to this in menu:
<ul class="nav navbar-nav navbar-right">
<li class="nav-item">Sobre</li>
<li class="nav-item">blog</li>
<li class="nav-item">Contato</li>
</ul>
Does anyone know in pug/jade how to achieve the dropdown menu? I only achieved the first level menu... :/
Thank you so much and Happy New Year!
HTML :
<li class="active"><span class="glyphicon glyphicon-dashboard"></span>Dashboard </li>
<li><a ng-click="viewAccount()"><span class ="glyphicon glyphicon-user"></span>Account</a></li>
I need to make Account menu as Active when function viewAccount() is called these functions are handled in same page. may be for Dashboard I can call a function dashboard() but how to make the menu active.
You can use ng-class:
<li ng-class="{'active': menu == 'dashboard'}">
and in hte viewAccount() just set the menu variable.
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together