RemoveClass和AddClass不起作用

时间:2015-07-30 23:35:20

标签: javascript jquery html css

我认为这可能是因为这些元素最初没有DOM元素。我尝试过使用事件然后使用传播工具,但它仍然无效:(

我想要它,以便当您单击其中一个项目时,它会从所有项目中删除下划线,然后将其添加到您刚刚单击的项目中,但在这种情况下,它会使其加下划线。要测试只是使用小提琴链接并点击第一个“A”,然后点击第二个更大的“A”

JSFiddle

$(document).ready(function() {
  $("li.big").on("click", function(e) {
    $("li>a.underline").removeClass("underline");
    $("li.big").addClass("underline");
    e.stopPropagation();
  });
  $("li.default").on("click", function(e) {
    $("li>a.underline").removeClass("underline");
    $("li.default").addClass("underline");
    e.stopPropagation();
  });
});
a {
  text-decoration: none;
}
.underline {
  text-decoration: underline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
  <li>
    <div class="raisetext">Raise Text:</div>
  </li>
  <li class="default"><a href="#" class="underline">A</a>
  </li>
  <li class="big"><a href="#" style="font-size: 20px;">A</a>
  </li>
  <li class="bigger"><a href="#" style="font-size: 26px;">A</a>
  </li>
</ul>

2 个答案:

答案 0 :(得分:0)

要添加到Sushils答案,听起来就像附加了锚点。因此,以防锚标记被动态附加到页面:

$(document).ready(function() {
  $("li").on("click","a", function() {
    $("li > a").removeClass("underline");
    $(this).addClass("underline");
  });
});

答案 1 :(得分:0)

您只需使用$('a').on('click', function(){代替li.bigli.default,因为它们都是链接。

试试这个

$(document).ready(function() {

    $('a').on('click', function(){
        $('a').removeClass('underline');
        $(this).addClass('underline');
    });
});

这是一个有效的 JSFIDDLE

注意:这将适用于页面上的所有链接。如果你不想申请所有链接,那么你可以使用一个班级。