Question

*EDIT: Here’s a link to a staging version of the site: http://staging-site.site44.com/ *

I am extremely new to jquery so I apologize if this question is extremely simple. What I’m trying to do on my website is first when the page is loaded have the content in my #topContent div fade in.

But along with this I’d also like my main navigation to use jquery hashtags to switch up the page content displayed in the #topContent div. I’ve read up a bit on how to do this in jquery and from what I’ve read I think I need create page sections within my main html doc that are hidden until a certain nav link is selected – then hide the content that is currently showing and show the content associated with the nav link that was just selected, how close am I?

Here’s my attempt so far at doing this…

HTML

<nav id="headerNav">

            <ul class="navList">
                <li class="navItem"><a href="#products" class="transition">Products</a></li>
                <li id="view-about" class="navItem"><a href="#about" class="transition">About</a></li>
                <li class="navItem"><a href="#portfolio">Portfolio</a></li>
                <li class="navItem"><a href="#">Contact</a></li>
            </ul>
        </nav>


    </div>

</div>

<!-- topMain -->
<div id="topContentWrapper">

    <div id="topContent">



            <div id="#products">
                <h2>Test worked! - products </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="#about">
                <h2>Test worked! - about </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="#portfolio">
                <h2>Test worked! - Portfolio </h2>
                <p>this test just worked sooo hard!</p> 
            </div>



    </div>




</div>

JS

// Fade In Effect

$(document).ready(function() {
    $("#topContent").css("display", "none");
    $("#topContent").fadeIn(2000);

$("a.transition").click(function(event){
    event.preventDefault();
    linkLocation = this.href;
    $("#topContent").fadeOut(1000);      
});

function redirectPage() {
    window.location = linkLocation;
}

$("#view-about").click(function(event){
    $("#products").fadeOut(1000);
    $("#portfolio").fadeOut(1000);   
    $("#about").fadeIn(1000); 
});

});

Answer 1

Ok, this code should work:

$(function(){
    $last = null;
    $(".navList li a").click(function(){
        if ($last != null) $last.fadeOut(1000);
        $last = $($(this).attr("href"));
        $($(this).attr("href")).fadeIn(2000);
    });
});

However, you will need to change your topContent to this:

    <div id="topContent">



            <div id="products" style="display: none;">
                <h2>Test worked! - products </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="about" style="display: none;">
                <h2>Test worked! - about </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="portfolio" style="display: none;">
                <h2>Test worked! - Portfolio </h2>
                <p>this test just worked sooo hard!</p> 
            </div>



    </div>

Reasons:

Firstly, you need your ids to be like this: id="about" and not this: id="#about".
The id specified doesn’t need a # in front of it. (Same as how class doesn’t need a . when setting a tag with it)

The jQuery code I tested locally, so it should work.

Note:

You may want to automatically have some different content automatically displayed, because right now as it loads it is blank until you click one of the links.

Hope this helped!

Edit:

I suggest you change the code to this:

ids =   [ "products", "about", "portfolio" ];
links = [ "Products", "About", "Portfolio" ];

$(function(){
    $last = null;
    $(".navList li a").click(function(){
        New = "#" + ids[links.indexOf($(this).text())];
        if ($last != null) $last.fadeOut(1000);
        $last = $(New);
        $(New).fadeIn(2000);
    });
});

Because it will keep all the content constantly in the same place. For this to work, you’ll need to change two more sections of your code:

<ul class="navList">
    <li class="navItem"><a href="#topContent" class="transition">Products</a></li>
    <li id="view-about" class="navItem"><a href="#topContent" class="transition">About</a></li>
    <li class="navItem"><a href="#topContent">Portfolio</a></li>
    <li class="navItem"><a href="#topContent">Contact</a></li>
</ul>

And:

    <div id="topContent">



            <div id="products" style="display: none; position: absolute">
                <h2>Test worked! - products </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="about" style="display: none; position: absolute">
                <h2>Test worked! - about </h2>
                <p>this test just worked sooo hard!</p> 
            </div>


            <div id="portfolio" style="display: none; position: absolute">
                <h2>Test worked! - Portfolio </h2>
                <p>this test just worked sooo hard!</p> 
            </div>



    </div>

That last part was just my suggestion, but do whatever you need to.