Adding a class to menu and then clicking the link using jquery?

问题

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;
}

回答1:

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?

回答2:

Mmm. If you want the link to 'be clicked', you have to remove the following line:

e.preventDefault();

But, the link will go to the page set in its href, I don't know if that's you want.

Hope this helps. Cheers

回答3:

Your code is doing what you tell it to do: e.preventDefault(); inside an event handler prevent the default behavior for that event.

回答4:

It's because you're using e.preventDefault();, which disabled the default behavior of the <a>.

Also, be aware that jQuery doesn't currently support the :link selector. As such, your selector will only work in certain browsers.

You may want to use this instead:

$('.topmenu a[href]').click(function (e) {

EDIT:

Of course following the link will cause a new page to load, and any changes to the DOM previously made will be lost.

If you're just trying to style the link for the current page, give this a try:

var page = window.location.pathname.split('/').pop();

$('a[href$="' + page + '"]').parent().addClass('selected');

When the page loads, it will get the last item in the pathname of window.location, and concatenate that into a selector to select the <a> element for that page.

来源：https://stackoverflow.com/questions/6565321/adding-a-class-to-menu-li-and-then-clicking-the-link-using-jquery

标签

jquery

css

Adding a class to menu <li> and then clicking the link using jquery?

问题

回答1:

回答2:

回答3:

回答4: