JQuery - work with divs

Question

Hello, I want to set another class for the clicked menu-part. Clicking generates url with #NAME. Here is my menu:

    <div id="head_menu">
        <a href="#order"><div name="order" id="menu_part">make order</div></a>
        <a href="#portfolio"><div id="menu_part">portfolio</div></a>
        <a href="#contacts"><div id="menu_part">contacts</div></a>
        <a href="#vacancies"><div id="menu_part">vacancies</div></a>
        <a href="#about"><div id="menu_part">about company</div></a>
    </div>

I need to add class: 'menu_choosed' for clicked part. Here is my jquery-code:

$(document).ready(
    function()
    {
        currentPage = window.location.hash;
        $('#head_menu>div').each(
            function()
            {
                if( currentPage == $(this).hash )
                {
                    $(this).addClass("menu_choosed");
                }
            }
        )
    }
)

I really don't know, how to filter values :( Help, please.

Answer 1

All IDs must be unique. You're currently repeating menu_part. I'd suggest removing the duplicate IDs. Give the nav links a class of "nav_link" and then use jquery to reference that class with an onclick event that changes the class to "menu_choosed".

Answer 2

Try this:

$(document).ready(
    function()
    {
        var currentPage = window.location.hash;
        $('#head_menu a div').each(
            function()
            {
                if( currentPage == $(this).parent().attr("href") )
                {
                    $(this).addClass("menu_choosed");
                }
            }
        )
    }
)

Answer 3

it should be $('#head_menu>a>div') I believe. also, ids are supposed to be unique, so it could cause problems that you have multiple divs with the same id. you may want to change menu_part to a class.

Answer 4

The easy way:

$(document).ready(
    function()
    {
        currentPage = window.location.hash;

        $('#head_menu a[href=' + currentPage + '] div').addClass('menu_choosed');
    }
);

There are a few problems with your HTML I would like to mention:

• Nowadays, most people use lists (<ul>, mostly) for navigation.
• Having a <div> inside an <a> is invalid if the <div> has display: block (default) and the <a> has display: inline (default).
• One document may only have one element per ID. You currently have several elements with the menu_part id.
• Using name for anchor points is not recommended. Prefer using ID's.

Answer 5

You can use:

$("#head_menu").find("a[href=" + window.location.hash + "]").addClass('highlight')