Selecting a tab by clicking on an element in another tab

Dash Python
1

Hi,

Is it possible with the dcc.Tabs component to select a tab by clicking on an element in another tab? For example: I have 2 tabs:

  • tab1 contains element id_button_select_tab_2
  • tab2 contains charts etc.

When I click id_button_select_tab_2 I’ld like to see tab2.

Thanks, Mat

2

I did this using dcc.Link

# Tabs

unselected = {'display': 'inline-block','width': '33%', 'border-style' : 'solid', 'border-width' : '1px', 'padding' :     '10px',
                      'vertical-align' : 'top', 'text-align': 'center', 'border-top-left-radius':'20px', 'border-top-right-radius' : '20px',
                      'background-color':'rgb(169,169,169)'}

selected = {'display': 'inline-block','width': '33%', 'border-style' : 'solid', 
             'border-width' : '1px', 'padding' : '10px', 'vertical-align' : 'top', 'text-align': 'center', 
             'border-top-left-radius':'20px', 'border-top-right-radius' : '20px','border-bottom':'0px'}
def tabs(t1style,t2style,t3style):
    return html.Div([
        html.Div([dcc.Link('Tab1', href='/tab1'),
                  ],style = t1style),
    html.Div([dcc.Link('Tab2', href='/tab2')
                      ],style =t2style),
    html.Div([dcc.Link('tab3', href='/tab3')
                      ],style =t3style),
    ], style = {'display':'flex', 'justify-content':'space-between'})

so in the page of tab 1, I added tabs(selected, unselected, unselected)as the first thing in the layout.
Hope this helps :slight_smile:

1 Like
3

Hi Ola,

Is should have been more clear: I was wondering if it’s possible with the dccTabs component. But thanks anyway: it’s looks like a promising alternative if it’s not possible with dcc.Tabs.

Mat