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，而不是编写内联函数，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

将控件点击到您的function并相应地在功能中访问

Answer 2

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

Answer

如何在点击li标签内的锚标签时激活特定的Li标签？

2 个答案: