Question

如何更改链接状态的活动，具体取决于单击哪一个。仅此时，只有主页一直处于活动状态，我不知道如何在链接之间实现更改行。

  <nav class="white z-depth-0">
    <div class="container">
      <div class="nav-wrapper">
        <a class="brand-logo black-text"><img src="/assets/images/logo.png"></a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons black-text">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li  class="active"><a class="black-text" routerLink="/home">Home</a></li>
          <li><a class="black-text" routerLink="/services">Services</a></li>
          <li><a class="black-text" routerLink="/contacts">COntacts</a></li>
        </ul>
      </div>
    </div>
  </nav>

<ul class="side-nav" id="mobile-demo">
  <li><a class="black-text" routerLink="/home">Home</a></li>
  <li><a class="black-text" routerLink="/services">Services</a></li>
  <li><a class="black-text" routerLink="/contacts">COntacts</a></li>
</ul>

Answer 1

全部在以下行中：

<li  class="active"><a class="black-text" routerLink="/home">Home</a></li>

将“有效”类切换为当前<li>

完整代码：

<style type="text/css">
.active {background-color: #F0F;}
</style>

<nav class="white z-depth-0">
    <div class="container">
      <div class="nav-wrapper">
        <a class="brand-logo black-text"><img src="/assets/images/logo.png"></a>
        <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons black-text">menu</i></a>
        <ul class="right hide-on-med-and-down">
          <li  class="active"><a class="black-text" routerLink="/home">Home</a></li>
          <li><a class="black-text" routerLink="/services">Services</a></li>
          <li><a class="black-text" routerLink="/contacts">COntacts</a></li>
        </ul>
      </div>
    </div>
  </nav>

<ul class="side-nav" id="mobile-demo">
  <li><a class="black-text" routerLink="/home">Home</a></li>
  <li><a class="black-text" routerLink="/services">Services</a></li>
  <li><a class="black-text" routerLink="/contacts">COntacts</a></li>
</ul>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('ul.right li').on('click', function(){
            var clicked = $(this);
            $('ul.right li').each(function(){
                if($(this).hasClass('active')){
                    $(this).removeClass('active');
                }
            });
            $(this).addClass('active');
        });
    });
</script>

如何更改实体化中导航栏链接的活动状态

1 个答案: