Home/ Questions/Q 6088167
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:57:14+00:00

I am trying to use jquery to add a class to my css menu

  • 0

I am trying to use jquery to add a class to my css menu it adds the class selected when you click on the menu item but it doesnt actually click the hyperlink.

edit: it adds an li class. but when I click, it doesn’t do anything

Html:

<div id="nav"> 
 <nav>
   <ul class="topmenu">
    <li><a href="home.aspx">Home</a></li>
    <li><a href="about.aspx">About</a></li>
    <li><a href="contact.aspx">Contact</a></li>
   </ul>
 </nav>
</div>

jquery:

<script type="text/javascript">
    $(function () {
        $('.topmenu a:link').click(function (e) {
            e.preventDefault();
            var $this = $(this);
            $this.closest('ul').children('li').removeClass('selected');
            $this.parent().addClass('selected');
        });
    });

</script>

I need it to click the link once its assigned the class “selected”, strange because the manual click doesnt seem to work?

css:

#nav 
{
    width: 100%;
    height: 30px;
}
nav a.current
{
    display: block;
    margin: auto;
    width: 950px;
}
nav ul
{
    list-style: none outside none;
    margin: 8px 0 0;
}
nav li
{
    float: left;
    height: 45px;
    left: -45px;
    position: relative;
    top: -16px;
    z-index: 2000;
}

nav li a {
    color: #FFFFFF;
    text-decoration: none;
}

nav a:link, nav a:visited, nav a:active
{
    display: block;
    float: left;
    font-size: 14pt;
    font-weight: normal;
    height: 33px;
    padding: 11px 17px 0;

}
nav li:hover, .home-link a, .current_page_item a:link, .current_page_item a:visited, a.children_openend, .topmenu li.selected a
{
    background: url("images/dc/menu-selected.png") repeat-x scroll 0 0 transparent !important;
    color: #FFFFFF;
}



nav a:hover
{
    color: #FFFFFF;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can trigger a click manually by using

    .trigger("click");

    So after you do

    addClass("selected");

    Just tag a trigger() call on the end:

    addClass("selected").trigger("click");

    Edit:

    Instead of doing that, you could just manually redirect the browser:

    addClass("selected");
window.location.href = $this.attr("href");

    The .trigger() wouldn’t work as you are triggering it on the li, not the a. My apologies.

    Edit again:

    If I understand you right, you want the li to still have the class once the link has been clicked and the new page loaded. You could do this with CSS. If you give each list item a class relating to the page, eg:

    <li class="home-link">....</li>

    And on each page, add an id to the body tag:

    <body id="home-page">

    Then you can do your styling to th currently selected li using:

    #home-page .home-link {}

    Does that help?

    • 0