Question

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

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.