将类添加到菜单< li>然后使用jquery单击链接？ [英] Adding a class to menu <li> and then clicking the link using jquery?

问题描述

我试图使用jquery添加一个类到我的CSS菜单，它添加了所选的类，当你点击菜单项，但它实际上并没有点击超链接。

编辑：它添加了 li 类。

 < div id =nav> 
< nav> 
< ul class =topmenu> 
< li>< a href =home.aspx>首页< / a>< / li> 
< li>< a href =about.aspx>关于< / a>< / li> 
< li>< a href =contact.aspx>联系人< / 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 ; 
}）; 
}）; 
 
< / script> 
 
我需要它点击链接，一旦它分配的类选择，奇怪因为手动点击似乎无效？
 
 
 
  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; 
} 
  
 
 
解决方案
使用
  .trigger（click）; 
  
所以，当你做
  addClass（selected）; 
  
只要在结尾处标记trigger（）呼叫：
  addClass（selected）。trigger（click）; 
  
编辑：
 
 
 
 ，您只需手动重定向浏览器：
  addClass（selected）; 
 window.location.href = $ this.attr（href）; 
  
 .trigger（）不会工作，因为你是在li上触发它， 。非常抱歉。
 
 
 
再次编辑：
 
 
 
如果我理解你的话，一旦链接被点击并加载了新的页面。你可以用CSS做到这一点。如果您给每个列表项一个与页面相关的类，例如：
 < li class =home-link> ; ....< / li> 
  
在每个页面上，向body标记添加一个ID：
 < body id =home-page> 
  
然后，您可以使用以下方式对您当前选择的li进行样式设置：
 ＃首页.home-link {} 
  
这有帮助吗？
 
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;
}

解决方案
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?

                        
这篇关于将类添加到菜单&lt; li&gt;然后使用jquery单击链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！