I’m trying to create a basic multi-tabbed app framework/callback using buttons (not using dcc.Tabs). Below is the code:
import dash import dash_core_components as dcc import dash_html_components as html app = dash.Dash(__name__) app.layout = html.Div([ html.Button('tab1', id='tab1', n_clicks=0), html.Button('tab2', id='tab2', n_clicks=0), html.Button('tab3', id='tab3', n_clicks=0), html.Div(id='content') ]) @app.callback( dash.dependencies.Output('content','children'), [dash.dependencies.Input('tab1', 'n_clicks' ), dash.dependencies.Input('tab2', 'n_clicks' ), dash.dependencies.Input('tab3', 'n_clicks' )] ) def on_click(one,two,three): if one: return html.H1(one) elif two: return html.H1(two) elif three: return html.H1(three) else: return html.H1("Select a tab") if __name__ == '__main__': app.run_server(debug=True)
The expected behavior is that clicking different tabs will serve different content (an h1 that displays the number of times a particular tab has been clicked). It will update when clicking a higher tab to a lower tab (i.e. if I click ‘tab3’ a bunch of time and then click ‘tab2’ or ‘tab1’ it will update), but it won’t update if I click a higher tab (i.e. if I first click ‘tab1’ and then click ‘tab2’, the change will not be made/the H1 won’t update, i.e. it will continue to show 'tab1’s count forevermore).
Not sure why this is. Any help would be much appreciated. Obviously the point here ultimately is to call different pages of content based on which has been selected.
Thanks in advance.