Question

What I am trying to do is leave an an effect when a user clicks on a navigational tab that indicates that they are in that tab.

I am still fairly new to JQuery so this might be wrong.

Javascript/JQuery

<script type="text/javascript">
    $(document).ready(function(){
        $("#menu").find("a").click(function(){
            $(this).addClass("highlight");
        })
    });
</script>  

CSS

.highlight
{
    text-decoration:none !important; 
    background-color: white;
    color: #999999;
    border-bottom: thick outset White;   
}

div.menu ul
{
    list-style: none;
    margin-left: 35px;
    padding: 0px;
    width: auto;
    text-decoration:none !important; 
}

div.menu ul li a
{
    color: #999999;
    display: inline;
    line-height: 13.6px;
    padding: 4px 20px;
    white-space: nowrap;
    text-decoration:none !important; 
}

Menu Code:

            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu " EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/The_Team.aspx" Text="The Team"/>
                    <asp:MenuItem NavigateUrl="~/Advisory_Board.aspx" Text="Advisory Board"/>
                    <asp:MenuItem NavigateUrl="~/Contact.aspx" Text="Contact"  />
                </Items>
            </asp:Menu>

Can someone point out where I went wrong?

Answer 1

Here …

 $("#menu")

you need to use

  $(".menu")

for css class.