Menu icon Foundation
Foundation 5 Tabs

Using Foundation for the 1st time by writing a single page app in Angular. I copied the Horizontal Tabs example into my app and it renders correctly but when I select a tab it redirects from

http://localhost:42574/app/views/index.html#/views/admin

to

http://localhost:42574/app/views/index.html#panel2

instead of the panel2 div tag in

http://localhost:42574/app/views/index.html#/views/admin

The app is not looking for #panels2 on views/admin (current page). Instead it looks for views/index.html#panel2 (where the app loaded)

Does my description make sense?

--------------

    <dl class="tabs" data-tab role="tablist" data-options="deep_linking:true">
        <dd class="active"><a href="#panel1">Tab 1</a></dd>
        <dd><a href="#panel2">Tab 2</a></dd>
        <dd><a href="#panel3">Tab 3</a></dd>
        <dd><a href="#/views/admin/#panel4">Tab 4</a></dd>
    </dl>
    <div class="tabs-content">
        <div class="content active" role="tab" id="panel1">
            <p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p>
        </div>
        <div class="content" role="tab" id="panel2">
            <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
        </div>
        <div class="content" role="tab" id="panel3">
            <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
        </div>
        <div class="content" role="tab" id="panel4">
            <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
        </div>
    </div>
            

         

Foundation 5 Tabs spa

Using Foundation for the 1st time by writing a single page app in Angular. I copied the Horizontal Tabs example into my app and it renders correctly but when I select a tab it redirects from

http://localhost:42574/app/views/index.html#/views/admin

to

http://localhost:42574/app/views/index.html#panel2

instead of the panel2 div tag in

http://localhost:42574/app/views/index.html#/views/admin

The app is not looking for #panels2 on views/admin (current page). Instead it looks for views/index.html#panel2 (where the app loaded)

Does my description make sense?

--------------

    <dl class="tabs" data-tab role="tablist" data-options="deep_linking:true">
        <dd class="active"><a href="#panel1">Tab 1</a></dd>
        <dd><a href="#panel2">Tab 2</a></dd>
        <dd><a href="#panel3">Tab 3</a></dd>
        <dd><a href="#/views/admin/#panel4">Tab 4</a></dd>
    </dl>
    <div class="tabs-content">
        <div class="content active" role="tab" id="panel1">
            <p>This is the first panel of the basic tab example. This is the first panel of the basic tab example.</p>
        </div>
        <div class="content" role="tab" id="panel2">
            <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
        </div>
        <div class="content" role="tab" id="panel3">
            <p>This is the third panel of the basic tab example. This is the third panel of the basic tab example.</p>
        </div>
        <div class="content" role="tab" id="panel4">
            <p>This is the fourth panel of the basic tab example. This is the fourth panel of the basic tab example.</p>
        </div>
    </div>
            

         
Rafi Benkual almost 5 years ago

Sorry we cant access your page unless it's public.

Steve S almost 5 years ago

I can get alive example working if that helps but the issue is with how tabs working in a single page app.

Katie almost 5 years ago

<dd><a href="#/views/admin/#panel4">Tab 4</a></dd>

It is not clear to me what you are trying to do here, but to jump to the tab, you need to make that line say:

<dd><a href="#panel4">Tab 4</a></dd>

Since you are jumping to the link on your current page which is called panel4.

If you want to jump to a different page, then I don't think a tab is a good choice, as a Tab is expected to be an element on the current page.

I hope this helps a little.