单击该li标签内的锚标签后，如何激活特定的Li标签？

Question

当我单击li标记中的特定锚标记时，我想使我的Li标记处于活动状态。

这是我的代码：

<ul class="list-unstyled detail-sidemenu mrb15">
    <li>
        <a onclick="Display1()" href="#"><span class="glyphicon glyphicon-link"></span> ABC</a>
    </li>
    <li>
        <a href="#" onclick="Display2()"><span class="glyphicon glyphicon-link"></span>PQR</a>
    </li>
</ul>

.detail-sidemenu li a:hover {
    background-color: #ed1b23;
    color: #ffffff;
}

现在，我想在Li标签上应用此悬浮类CSS：

 function Display1()
    {
        //active ABC
    }

 function Display2()
    {
         //Active PQR and remove active from ABC
    }

Answer 1

将click event handler添加到anchor而不是编写如下的内联函数：

 $('.ach').on('click', function() { $('li').removeClass('active'); $(this).closest('li').addClass('active'); }); 

 .detail-sidemenu li a:hover { background-color: #ed1b23; color: #ffffff; } .active { color: red; background-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-unstyled detail-sidemenu mrb15"> <li><a href="#" class="ach"><span class="glyphicon glyphicon-link"></span> ABC</a> </li> <li><a href="#" class="ach"><span class="glyphicon glyphicon-link"></span>PQR</a> </li> </ul> 

---

更新资料

 function Display1(ctrl) { $('li').removeClass('active'); $(ctrl).closest('li').addClass('active') } function Display2(ctrl) { $('li').removeClass('active'); $(ctrl).closest('li').addClass('active') } 

 .detail-sidemenu li a:hover { background-color: #ed1b23; color: #ffffff; } .active { color: red; background-color: black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="list-unstyled detail-sidemenu mrb15"> <li><a href="#" onclick="Display1(this)"><span class="glyphicon glyphicon-link"></span> ABC</a> </li> <li><a href="#" onclick="Display2(this)"><span class="glyphicon glyphicon-link"></span>PQR</a> </li> </ul> 

将单击的控件传递给您的function并相应地在函数中访问它

Answer 2

要使特定的<li>标签处于活动状态或非活动状态，请在stackoverflow上参考此答案。

回答