CODEWITHSUNDEEP
html
Lee Hibberd
Lee Hibberd

Reputation: 99

Showing different nav link, depending on which page you navigate from

Apologies if the title is misleading hopefully I can explain myself here..

Basically, to simplify it.. I have a product page, we'll call it "Apple"

"Apple" is available one of two ways, either by coming from the page "fruit" or from the page "Popular Brand"

Now, at the top of the "Apple" page I have a set of navigation links.. similar to this..

Home - Categories - Fruit - Contact

Now, this is all well and good if you arrived at "Apple" from the "Fruit" page, however, as it stands, if you arrive from the "Popular Brand" page, you are still shown the same navigation links.

where as I would like it to show..

Home - Categories - Popular Brand - Contact

So my question is,

How do I make the link change depending on which page you originally came from, without making duplicate pages for either situation.

The code is nothing special, just basic links..

<ul>

<li> <a href="index.html">Home</a></li>

<li> <a href="categories.html">Categories</a></li>

<li> <a href="fruit.html">Fruit</a></li>

<li class="current_page_item"><a href="fruit.html">Fruit</a></li>

<li> <a href="Contact.html">Contact</a></li>

</ul>

Hope I have explained myself clearly, and appreciate any help with this.

Lee

Upvotes: 1

Views: 102

Answers (2)

Sampson
Sampson

Reputation: 268374

You could append to the source to the url itself, so that it ends with ?source=fruit or possibly even ?source=popular%20brand. Search out this source variable, and hide one of two links in response.

Suppose this were your HTML:

<nav id="nav">
    <a href="#">Home</a> 
    <a href="#">Categories</a> 
    <a href="#" data-toggle>Fruit</a> 
    <a href="#" data-toggle>Popular Brand</a> 
    <a href="#">Contact</a>
</nav>

Originally it has both of our links within it: Fruit, and Popular Brands. Next comes a function to help us lookup values in document.location.search:

function getParam ( p ) {
    var search = decodeURIComponent( document.location.search );
    var val, exp = new RegExp( "[?&]" + p + "=([^&]+)" );
    return ( val = search.match( exp ) ) ? val[1] : false;
}

This works by passing in a name, and returns either the corresponding value, or false. Next we will get, or provide, a value for source. If our getParam function can't find one, we'll simply assume it is "Fruit":

var source = getParam( "source" ) || "Fruit";

Now we gather a reference to all of the links in our nav area:

var links = document.getElementById("nav").getElementsByTagName("a"), 
    count = links.length, a;

At this point we cycle over the collection of a elements. If they have the data-toggle attribute, we check to see whether their text matches the source text. If it does not, we hide it. This means ?source=fruit will hide the Popular Brand link, and ?source=popular%20brand will hide the Fruit link.

while ( a = links[ --count ] ) {
    if ( a.hasAttribute("data-toggle") )
        if ( (a.textContent || a.innerText).toLowerCase() !== source.toLowerCase() )
            a.parentElement.removeChild( a );
}

You can see this online by viewing the following URLs:

Upvotes: 1

Alex Lynham
Alex Lynham

Reputation: 1318

You use a scripting language to display different things depending on parameters passed along in the url, like ?from=fruit or ?from=popular_brand as per your example above.

Upvotes: 0

Related Questions