I need to highlight selected tabs in the navigation tab wizard. tab functionality is working fine..but I need to add the CSS(border-style) for all the selected tab. for example, if I have 4 tabs. If I have selected the first and second tab(next button) those tab needs to be highlighted(apply border) and again if I click the back button the highlight needs to be removed.Any help would be appreciated. please find the image below for reference.
public tabs: string[] = ['tab1', 'tab2', 'tabs3', 'tabs4']
public next(): void {
const currentIndex: number = this.tabs.indexOf(this.selectedTab);
const newIndex = currentIndex + 1;
this.selectedTab = this.tabs[newIndex];
}
public back(): void {
const currentIndex: number = this.tabs.indexOf(this.selectedTab);
const newIndex = currentIndex - 1;
this.selectedTab = this.tabs[newIndex];
}
.tab-highlight {
border-top: 2px solid blue;
cursor: pointer;
}
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let tab of tabs; let i= index;" [attr.data-index]="i" role="presentation"
class="accounts_li"
[class.active]="selectedTab===tab" (click)="toggle($event)">
<a (click)="selectedTab = tab" aria-controls="one" role="tab" data-toggle="tab">{{tab}}</a>
</li></ul>
<div class="tab-content">
<div id="tab1" *ngIf="selectedTab === tabs[0]" role="tabpanel" class="tab-pane active">
tab1 content
</div>
<div id="tab2" *ngIf="selectedTab === tabs[1]" role="tabpanel" class="tab-pane active">
tab2 content
</div>
<div id="tab3" *ngIf="selectedTab === tabs[2]" role="tabpanel" class="tab-pane active">
tab3 content
</div>
</div>
<button class="button" (click)="back()"><span>
Back</span>
</button>
<button class="button" (click)="next()"><span>
Next</span>
</button>
image
If you want to select multiple tabs then you should change the selectedTab property with an array which will hold all selected tabs. Then you could create a method which will check if the tab is selected or not in order to push/remove from the selected array. Lastly, for the conditional class name you could use [ngClass]="isSelected(tab) ? 'tab-highlight' : null", this will add the class only if the condition is evaluated to true (more on this here https://angular.io/api/common/NgClass)
Component code:
tabs: string[] = ["tab1", "tab2", "tab3", "tab4"];
selectedTabs: string[] = [];
onTabClick(tab) {
if (this.isSelected(tab)) {
let index = this.selectedTabs.indexOf(tab);
this.selectedTabs.splice(index, 1);
} else {
this.selectedTabs.push(tab);
}
}
isSelected(tab: string) {
return this.selectedTabs.indexOf(tab) > -1;
}
HTML code for the tab menu:
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let tab of tabs; let i= index;" [attr.data-index]="i" role="presentation"
[ngClass]="isSelected(tab) ? 'tab-highlight' : null">
<a (click)="onTabClick(tab)" aria-controls="one" role="tab" data-toggle="tab">{{tab}}</a>
</li>
</ul>
Stackblitz: https://stackblitz.com/edit/question63192497?file=src%2Fapp%2Fapp.component.ts
Related
I'm working on small mvc application, and on my view there is tab control which has 3 tabs, and depending on ViewBag value I need to open my third tab, here is image of a how my view looks:
So when View is loaded, I need to check for a value of my ViewBag and depending on that I need to open my TAB 3, so here is what I've tried:
<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
#if (ViewBag.SuccessBody == null)
{
<li role="presentation" class="active">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="">
TAB 3
</li>
}
else
{
<li role="presentation" class="">
TAB 1
</li>
<li role="presentation" class="">
TAB 2
</li>
<li role="presentation" class="active" onload="RedirectToTab();">
TAB 3
</li>
}
</ul>
As you can see guys depending on a value od ViewBag.SuccessBody I tried to load corresponding HTML, so if there is a value then I would load HTML which include TAB3 To own class="active" (please read code detailed).
But unfortunatelly with this approach, TAB3 becoming active but not also OPENED, so its content is not visible, it's being kept acctually on TAB1 while TAB3 looks like it's active, and that is bad :( .
So what I've done is :
I wrote javasscript method which should really open TAB3, but I couldn't know how to invoke it so I guess I could invoke it using onload method on my li element, so guys as you can see in code above I wrote on my li
onload="RedirectToTab();"
but unfortunatelly nothing happens..
And here is definition of my RedirectToTab javascript method:
function RedirectToTab() {
var customVal = $("#editViewBag").val();
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
So guys one more time, how can I open TAB3 depending on a vaue of my ViewBag?
Thanks guys
Cheers
Just use the razor engine to output your ViewBag value in the javascript:
function RedirectToTab() {
var customVal = '#ViewBag.SuccessBody';
if (customVal == 'True') {
$('#myTab a[href="#tab_content3"]').tab('show');
}
}
Now you can call this from the doc ready:
$(document).ready(function () {
RedirectToTab();
});
You don't need to use JavaScript to open the tab. You can do it your Razor view which has the benefit of not seeing the active tab switch from 1 to 3 when the page loads. Here is a simple example with 3 tabs:
#{
string tab1 = null, tab2 = null, tab3 = null;
if (ViewBag.SuccessBody == null)
{
tab1 = "active";
}
else
{
tab3 = "active";
}
}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="#tab1">Tab 1</li>
<li role="presentation" class="#tab2">Tab 2</li>
<li role="presentation" class="#tab3">Tab 3</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane #tab1" id="tab1">
tab 1
</div>
<div role="tabpanel" class="tab-pane #tab2" id="tab2">
tab 2
</div>
<div role="tabpanel" class="tab-pane #tab3" id="tab3">
tab 3
</div>
</div>
I draw tabs bootstrap using react.js. And then I was at the event onŠ”lick content first tab, I create another tab. But when I try to switch tabs, I do not see the contents of the dynamic creation of the tab.
I understand that is not assigned to the class of the class of active tab-pane. But I do not understand what I'm doing wrong? It is not dynamically created tabs are switched. What could be the problem?
Code on codepen: https://codepen.io/alex183/pen/apOKxP?editors=0010
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
newTab:false, id:'', name:'', numTab:0,
currentTab:"home",
};
}
changeTab(e) {
this.setState({ currentTab: e.target.getAttribute('aria-controls') });
}
render() {
const tabs = [], tabsContent = [];
for(let i=0; i < this.state.numTab; i+= 1){
console.log('for->', this.state);
let href = "#"+this.state.id;
let tcClass = this.state.currentTab == this.state.id ? "tab-pane active" : "tab-pane";
tabs.push(<li role="presentation">{this.state.name}</li>);
tabsContent.push(<div role="tabpanel" className="tab-pane active" id={this.state.id}>{this.state.id} - {this.state.name}</div>);
}
return(
<div>
<ul className="nav nav-tabs" role="tablist">
<li role="presentation" className="active"><a onClick={this.changeTab.bind(this)} href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation">Profile</li>
<li role="presentation">Mes</li>
{tabs}
</ul>
<div className="tab-content">
<div role="tabpanel" className="tab-pane active" id="home"><h1 onClick={this.addTab.bind(this)} id="obj">123</h1></div>
<div role="tabpanel" className="tab-pane" id="profile">456</div>
<div role="tabpanel" className="tab-pane" id="mes">789</div>
{tabsContent}
</div>
</div>
);
}
addTab(e){
let id = e.target.getAttribute('id');
let name = e.currentTarget.textContent;
this.setState({newTab:true, id:id, name:name, numTab:this.state.numTab+1});
console.log('addTab->', this.state);
}
}
React.render(<App />, document.body);
UPD
I just created three tabs, and they work fine.
I click on the contents of the first tab.
And dynamically creates
another tab.
When I switch
to the last created tab I can see the contents of the first tab how
to fix it?
You have many problems in you code.
First, you can't use id of your h1 element to pass tab-content id to addTab, because the tab content must have a unique id. You can use data-attribute to pass data, or add arguments to your binding (this.addTab.bind(this, "obj")).
Here is your code corrected :
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
newTab:false, id:'', name:'', numTab:0
}
}
render() {
const tabs = [], tabsContent = [];
for(let i=0; i < this.state.numTab; i+= 1){
console.log('for->', this.state);
let href = "#"+this.state.id;
tabs.push(<li role="presentation">{this.state.name}</li>);
tabsContent.push(<div role="tabpanel" className="tab-pane" id={this.state.id}>{this.state.id} - {this.state.name}</div>);
}
return(
<div>
<ul className="nav nav-tabs" role="tablist">
<li role="presentation" className="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Mes</li>
{tabs}
</ul>
<div className="tab-content">
<div role="tabpanel" className="tab-pane active" id="home">
<h1 onClick={this.addTab.bind(this)} data-id="obj">Add new tab</h1>
</div>
<div role="tabpanel" className="tab-pane" id="profile">456</div>
<div role="tabpanel" className="tab-pane" id="mes">789</div>
{tabsContent}
</div>
</div>
);
}
addTab(e){
let id = e.currentTarget.dataset.id;
let name = e.currentTarget.textContent;
this.setState({newTab:true, id:id, name:name, numTab:this.state.numTab+1});
console.log('addTab->', this.state);
}
}
React.render(<App />, document.body);
I want to use ngIf to show a component like this:
<ul class="nav nav-tabs">
<li (click)="resetTab(1)" [ngClass]="{'active': first}" id="active"><a>Tab 1</a></li>
<li (click)="resetTab(2)" [ngClass]="{'active': second}" ><a>Tab 2</a></li>
</ul>
<div class="tab-content">
<div *ngIf="first" class="tab-pane fade in active">
Content of tab 1
</div>
<div *ngIf="second" class="tab-pane fade">
Content of tab 2:
<events-list></events-list>
</div>
</div>
However for some reason I don't see my component appears when switching tabs (tabs itself switch just fine)
My component's code:
resetTab(tab: number) {
this.first = (tab == 1) ? true : false;
this.second = (tab == 2) ? true: false;
}
I try this for sidebar menu and working fine you can try this:
in html
<div class="sidebar-category">
<ul class="nav nav-pills nav-stacked">
<li [class.active]="panelshow == 'tab1'">
<a (click)="setPanel('tab1')">Tab1</a>
</li>
<li [class.active]="panelshow == 'tab2'">
<a (click)="setPanel('tab2')">Tab2</a>
</li>
</ul>
</div>
<div *ngIf="panelshow == 'tab1'">
</div>
<div *ngIf="panelshow == 'tab2'">
</div>
and in component:
public panelshow:string;
private setPanel(name) {
this.panelshow = name;
}
I am using a bootstrap tabpanel like this:
<div class="row spiff_tabs_body">
<!-- Nav tabs -->
<ul class="nav nav-tabs spiff_tabs" role="tablist">
<li role="presentation" class="active">
Potential Spiff
</li>
<li role="presentation">
Instant Spiff
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
<div role="tabpanel" class="tab-pane" id="instantspiff"></div>
</div>
</div>
</div>
</div>
Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.
Updated:
I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.
I need to do something like this:
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
alert("instantspiff");
}
else {
alert("delayedspiff");
}
</script>
check this
var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
alert("delayedspiff");
}
else {
alert("instantspiff");
}
when they click on a tab add this
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// here is the new selected tab id
var selectedTabId = e.target.id;
});
i want to run tabs within tabs. this is the first tab section which is running without problems.
<div id="tabs2" class="tabs">
<ul>
<li class="skew-25 active">
<a class="skew25" href="#"> 1 tab</a>
</li>
<li class="skew-25"></li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;"> 1 tab output</div>
<div class="tab-panel" style="display: none;">2 tab output</div>
<div class="tab-panel" style="display: none;">3 tab output</div>
</div>
</div>
Now I include another tab within the sections (called 'tab output') of the above:
<div id="tabs4" class="tabs tabs-vertical">
<ul>
<li class="skew-25 active">tab within tab section</li>
<li class="skew-25">
<a class="skew25" href="#"></a>
</li>
<li class="skew-25"></li>
</ul>
<div class="tabs-pane">
<div class="tab-panel active" style="display: block;">content</div>
<div class="tab-panel" style="display: none;"></div>
<div class="tab-panel" style="display: none;"></div>
</div>
</div>
this second code i include in '1 tab output' '2 tab output' and '3 tab output'
Problem is they will ether not send output, not available to choose or not active when apply to a tab in first tab. How to fix this?
Javascripts are:
function(e) {
if (!$(this).parent().hasClass('active')) {
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
} else {
return false;
}
}
and
f = v.handle = function(e) {
return typeof x === i || e && x.event.triggered === e.type ? t : x.event.dispatch.apply(f.elem, arguments)
}
normal
/* ================ Tabs. ================ */
$.fn.tabs = function(options) {
var defaults = {
direction: ''
};
var options = $.extend({}, defaults, options);
if(options.direction == "vertical"){
$(this).addClass('tabs-vertical');
}
var tabsUl = $(this).find(' > ul'),
activeTab = tabsUl.find('li.active').index(),
tabsPane = $(this).find('.tabs-pane');
tabsPane.find('.tab-panel').fadeOut();
tabsPane.find('.tab-panel').eq(activeTab).fadeIn();
tabsUl.find('li').find('a').click(function(e){
if(!$(this).parent().hasClass('active')){
e.preventDefault();
var ind = $(this).parent().index();
tabsUl.find('li').removeClass('active');
$(this).parent().addClass('active');
tabsPane.find('.tab-panel').fadeOut(0).removeClass('active');
tabsPane.find('.tab-panel').eq(ind).fadeIn(350).addClass('active');
return false;
}else{
return false;
}
});
}
Disable the div and all its contents with jQuery like so:
How to disable all div content
Also, instead of all that js code you can use jQueryUI Tabs or Bootstrap tabs (also explained here scroll down to the Toggable Tabs section at the bottom of the page).