Change PARENT class when child link is clicked to “active”
好吧,我已经看到了关于这个主题的以下信息,所以请务必进一步了解,这是我迄今为止所读到的:
删除/添加链接类onclick
使用jquery更改元素的ID
我已经阅读了明显的jquery用户界面页面,但我找不到添加onclick的方法,因此它将"parent"元素更改为class="active"
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <!--navbar--> <nav class="top-bar"> <ul class="title-area"> <!-- Title Area --> <li class="name"> Relution.co.uk </li> <li class="toggle-topbar menu-icon"> <span>Menu</span> </li> </ul> <section class="top-bar-section"> <!-- Left Nav Section --> <ul class="left hide-for-medium-up"> <li class="has-form">Click Here to login </li> <li class="has-form">Not a member? Register for free </li> </ul> <!-- Right Nav Section --> <ul class="right"> <li class="divider"> </li> <li class="active">Home </li> <li class="divider"> </li> <li> About </li> <li class="divider"> </li> <li> Services </li> <li class="divider"> </li> <li> Portfolio </li> <li class="divider"> </li> <li> Contact </li> <li class="divider"> </li> <li class="has-dropdown hide-for-small"> <i class="foundicon-settings"> <ul class="dropdown"> <li> <i class="foundicon-search"> Search </li> </ul> </li> <li class="has-form hide-for-medium-up"> <form> <input type="text"> Search </form> </li> </ul> </section> </nav> <!--/navbar--> |
下面是我用来将链接作为onlick目标的代码,即使我这样做了,我希望父级li变得活跃,而所有其他li都不活跃。
1 2 | $(document).ready(function() { $('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(){ |
jsfiddle.net http:/ / / / n5clu
1 2 3 4 | $('nav.top-bar > section.top-bar-section > ul.right > li > a').click(function(e){ e.preventDefault(); $(this).parent().addClass('active').siblings().removeClass('active'); }); |