HTML include menu - текущая страница css

Question

Я должен включить меню HTML.Мне нужно отредактировать активную страницу из меню CSS.

включить меню:

<div w3-include-html="inc/header.html"></div>

/*CSS example - but not working:*/

.main-menu a.active {
  color: #0061bb;
}

<div class="mnmenu-sec">
  <div class="container">
    <div class="row">
      <div class="col-md-12 nav-menu">
        <div class="col-md-3">
          <div class="logo">
            <a href="index.html"><img src="img/logo.png" alt="" /></a>
          </div>
        </div>

        <div class="col-md-9">
          <div class="menu">
            <nav id="main-menu" class="main-menu">
              <ul>
                <li><a href="index.html">menu 1</a></li>
                <li><a href="page2.html">menu 2</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Мне нужно выделить активную страницу из меню, например, изменить цвет шрифта.Можете ли вы сказать мне, как я мог это сделать?

Answer 1

.main-menu a {
    color: #000;
    transition: 0.3s;
}

.main-menu a:hover {
    color: #0061bb;
}

<div class="mnmenu-sec">
    <div class="container">
        <div class="row">
            <div class="col-md-12 nav-menu">
                <div class="col-md-3">
                    <div class="logo">
                        <a href="index.html"><img src="img/logo.png" alt=""/></a>
                    </div>
                </div>

                <div class="col-md-9">
                    <div class="menu">
                        <nav id="main-menu" class="main-menu">
                            <ul>
                                <li><a href="index.html">menu 1</a></li>
                                <li><a href="page2.html">menu 2</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 2

: active = когда ссылка щелкается по ссылке.
: hover = когда курсор мыши находится над ссылкой

Если вы хотите: active, тогда css должен сделать это:

    #main-menu a:active {
      color: #0061bb;
    }

Если вы хотите покрасить ссылку, которой вы в данный момент являетесь, вам понадобится JavaScript, чтобы добавить класс наподобие class = "currentLink", а затем добавить к нему CSS

    .currentLink {
      color: #0061bb;
    }