Question

我正在尝试在font-awesome元素之间切换。

我想在点击新的font-awesome标记时删除a元素。 font-awesome元素应仅对当前单击的a标记可见。

[FIDDLE] [1]

我的JS CODE。

$(document).ready(function() {
  $('.nav ul li:first').append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
  $('.nav ul li a').click(function(event) {
    event.preventDefault();
    $(this).append($("<i class='fa fa-chevron-right' aria-hidden='true'></i>"));
$(this).parent().siblings().removeClass('fa fa-chevron-right'); // not working
      });

    });

Answer 1

$(document).ready(function() {
  var fontAwesome = $('<i/>').addClass('fa fa-chevron-right');
  $('.nav ul li:first').append(fontAwesome);
  $('.nav ul li a').on('click', function(event) {
    event.preventDefault();
    $('.nav ul li a i.fa.fa-chevron-right').remove();
    $(this).append(fontAwesome);
  });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav">
  <ul>
    <li><a href="#section-features">Option A</a></li>
    <li><a href="#section-functions">Option B</a></li>
    <li><a href="#section-pecifications">Option C</a></li>
  </ul>
</div>

Answer 2

我知道你已经接受了答案，但你并不需要所有的逻辑 - 所有你要做的就是在当前选择的li上设置一个活动类 - 并使用CSS将FA图标添加到该元素。然后单击每个li将从列表中删除活动类，然后将其应用于选定的l = i - 图标将神奇地移动。请注意，我还没有应用event.preventDefault（）;单击一下 - 我认为它们实际上应该导航到你想要的元素 - 因为它们在导航列表中。

将活动类设置为li的好处是，您可以根据需要设置样式 - 以及向其添加图标。

$(document).ready(function() {
  $('nav ul li').click(function(){
    $('nav ul li').removeClass('active');
    $(this).addClass('active');
  })
});

nav ul li.active:after {
   font-family: FontAwesome;
   content: "\f054";
   padding-left: 5px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <ul>
    <li class="active"><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
  </ul>
</nav>

jquery - 删除兄弟姐妹不工作

2 个答案: