jQuery navigation control

Question

i want to show and hide the content of my website with jquery. if i click at a link at the navigation, the content should show the <section> with a special id. here my code:

The navigation:

$(document).ready(function(){
  $("a").click(function(){
    $("section#home").css({"display":"none"});
    $("section#order").css({"display":"none"});
    $("section#projects").css({"display":"none"});
    $("section#contact").css({"display":"none"});
    $("section#about").css({"display":"none"});

    if ($(this[href="home"])){
        $("section#home").css({"display":"block"});
    } else if ($(this[href="order"])){
        $("section#order").css({"display":"block"});
    } else if ($(this[href="projects"])){
        $("section#projects").css({"display":"block"});
    } else if ($(this[href="contact"])){
        $("section#contact").css({"display":"block"});
    } else if ($(this[href="about"])){
        $("section#about").css({"display":"block"});
    }
  });
});

The html-file:

<section id="content">
                <section id="home">
                    <h1>home</h1>
                </section>
                <section id="order">
                    <h1>order</h1>
                </section>
                <section id="projects">
                    <h1>projects</h1>
                </section>
                <section id="contact">
                    <h1>contact</h1>
                </section>
                <section id="about">
                    <h1>about</h1>
                </section>
</section>

It shows at every navigation-link the same page (home). What is wrong? you can look by your self at Homepage

Arun P Johny · Accepted Answer · 2013-12-15 11:40:42Z

5

Your syntax in the if condition is wrong, it should be $(this).is('[href="home"]')

$(document).ready(function () {
    $("a").click(function (e) {
        e.preventDefault();

        //hide all sections under #content
        $('#content > section').hide();

        //show the elemet with the given href as the id
        $('#' + $(this).attr('href')).show();

    });
});

answered Dec 15, 2013 at 11:40

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rajaprabhu Aravindasamy · Accepted Answer · 2013-12-15 11:57:36Z

3

You have to hide all the children section inside the section with id content. Then just get the href attribute from the clicked anchor tag. And show the section which is having the id as same as the clicked anchor tag.

Try,

$(document).ready(function(){
  $("a").click(function(e){
    e.preventDefault();       
    $('#content').children('section').hide();    
    $('#' + $(this).attr('href')).show();
  });
});

edited Dec 15, 2013 at 11:57

answered Dec 15, 2013 at 11:42

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

5 Comments

Tekkzz Over a year ago

dont work..look at link, your code is uploaded, but...dont work ;(

Rajaprabhu Aravindasamy Over a year ago

@Tekkzz remove the concatenated # from the selector. See my updated Code.

Tekkzz Over a year ago

what does e.preventDefault() do?

Rajaprabhu Aravindasamy Over a year ago

@Tekkzz You just changed your markup by removing that # in the href. Now your page will be reloaded when you click on it. So in order to prevent it you should use e.preventDefault(). Technically it will prevent the default behaviour.

Tekkzz Over a year ago

ahh, thnak you for this info

Collectives™ on Stack Overflow

jQuery navigation control

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related