试图建立一个链接“;活动的”;当单击另一个链接时

Trying to make a link "active" when another link is clicked

本文关键字：链接 活动 单击 另一个 一个 建立      更新时间：2023-09-26

我需要帮助编辑以下JavaScript。

<script>
  $('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
  });
</script>

=================================================

除了现有的功能外，我还需要"链接2"在单击"链接1"时变为"活动"。请参阅下面的HTML。

<h1 class="brand"><a href="#link1">Brand</a></h1>
<ul class="nav">
  <li class="active"><a href="link2">One</a></li>
  <li><a href="link3">Two</a></li>
  <li><a href="link4">Three</a></li>
</ul>

您可以使用以下代码。jsFiddle示例可在此处获得。

  $('.nav li a').on('click', function (event) {
      event.preventDefault(); //Add this only if you want to stop the default link action.
      $(this).parent().siblings('li').removeClass('active');
      $(this).parent().addClass('active');
  });
  //The below is to make #link2 active whenever #link1 is clicked.
  $('.brand a').on('click', function () {
      $('.nav li:first').addClass('active');
      $('.nav li:first').siblings('li').removeClass('active');
  });

假设页面上只有一个活动元素，则可以执行这样的操作。

  $('.nav li a').on('click', function() {
    $('.active').removeClass('active');
    $(this).parent().addClass('active');
  });

如果没有，那么你可以像一样使用closest

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

根据你的评论，我认为这可以工作

  $('.nav li a').on('click', function() {
    $('active').removeClass('active');
    var link = $(this).attr('href'), // link1
        number = parseInt(link.substr(-1)), // 1
        newHref = link.slice(0, link.length - 1) + number++;
    $(newHref).addClass('active');
  });

因此，如果您单击link1，则link2将获得活动类，然后单击link2，然后link3将获得它，依此类推…

相关文章：