CODEWITHSUNDEEP
javascripthtmlangularjs
Forrest Keppler
Forrest Keppler

Reputation: 727

Clicking hyperlink doesnt trigger travel

I have an angular app with tabs. I have a navbar with a dropdown that looks like this:

<ul class="dropdown-menu" dropdown-menu>
    <li><a href="/page1">page 1</a></li>
    <li><a href="/page2#/tab1/">page 2</a></li>
    <li><a href="/page2#/tab2">page 3</a></li>
</ul>

When I'm on page 1, I can travel to either page 2 or page 3 just fine. The url changes and the page loads to show the content on that tab.

The problem is this: When I'm on page 2 or page 3, clicking the hyperlink to the other page causes the url to change BUT the page does NOT load new content.

How do I ensure that the behaviour of the hyperlink is consistent no matter which page I'm on?

Upvotes: 0

Views: 58

Answers (2)

JD Byrnes
JD Byrnes

Reputation: 831

'Page 2' and 'Page 3' are the same page (page2). Anything after the # in the URL is the fragment identifier, and the fragment identifier indicates where on the page you should be sent to when loaded.

Generally when you're using variables like 'tab1', you'd have JavaScript load that tab (which is beyond the scope of this question)

Further reading: https://en.wikipedia.org/wiki/Fragment_identifier#Examples (Bonus: Notice how your browser takes you straight to the 'Examples' section?)

Update: In the comments, you mention wanting to make the page changes seem consistent... The following code should work as it adds a 'query' parameter to the URL - so while it still points to the same file, the browser needs to refresh the URL as it can't be sure the same content will be provided from the webserver.

<ul class="dropdown-menu" dropdown-menu>
    <li><a href="/page1">page 1</a></li>
    <li><a href="/page2?tab=1#/tab1/">page 2</a></li>
    <li><a href="/page2?tab=2#/tab2">page 3</a></li>
</ul>

Upvotes: 1

Sherly Febrianti
Sherly Febrianti

Reputation: 1147

Try to do this :

HTML:

<ul class="dropdown-menu" dropdown-menu>
    <li><a href="#page1">page 1</a></li>
    <li><a href="#page2">page 2</a></li>
    <li><a href="#page2">page 3</a></li>
</ul>
<div id="page1">Content of Page 1</div>
<div id="page2">Content of Page 2</div>
<div id="page3">Content of Page 3</div>

JQUERY :

<script type="text/javscript">
    $('#page1').click(function() {
        $('#page1').show();
        $('#page2').hide();
        $('#page3').hide();
    })
    $('#page2').click(function() {
        $('#page2').show();
        $('#page1').hide();
        $('#page3').hide();
    })
    $('#page3').click(function() {
        $('#page3').show();
        $('#page2').hide();
        $('#page3').hide();
    })
</script>

Upvotes: 0

Related Questions