关于html:当子链接被点击为“活动”时更改PARENT类

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