我想在点击 li 标签内的特定 anchor 标签时激活我的 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
}
最佳答案
将点击事件处理程序
添加到您的 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>
将点击的控件传递给您的函数
并相应地在函数中访问它
关于javascript - 如何在点击该 li 标签内的 anchor 标签时激活特定的 Li 标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33074661/