DurandalJs ignore anchor with #

Question

I'm trying to implement Zurb Foundation tabs in a DurandalJS app. Zurb Foundation uses # in their tab HTML structure. The # is used to link tab with it's contents.

<ul class="tabs" data-tab>
    <li class="tab-title active"><a href="#panel2-1">Tab 1</a></li>
    <li class="tab-title"><a href="#panel2-2">Tab 2</a></li>
</ul>
<div class="tabs-content">
    <div class="content active" id="Div1">
        <p>First panel content goes here...</p>
    </div>
    <div class="content" id="Div2">
        <p>Second panel content goes here...</p>
    </div>
</div>

DurandalJs is intercepting the anchor clicks and is loading my default page instead of allowing Zurb to change tabs. How do I tell DurandalJs to ignore the anchors that are used in Zurb's tab structure?

Not true! This is a very common problem between single page application routers and tabs because they both customarily use anchortags in their routes. — mbejda, Sep 27 '14 at 17:28

score 0 · Answer 1 · answered Sep 27 '14 at 17:39

0

This is a very common problem in single page application routers and tabs because they both use anchortags in their urls. What I would recommend is to take a different approach on your tabs structure one that does not involve anchortags.

answered Sep 27 '14 at 17:39

mbejda

1,471
16
25

DurandalJs ignore anchor with #

1 Answers1