Why is the active class not added?

Question

Why is the active class not added?

Navigation

#1 by (0 votes)

0

I have this menu

<section class="menu">
            <nav class="navbar navbar-expand-lg navbar-light">
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav" id="nav-menu">
                        <li class="nav-item active">
                            <a class="nav-link" href="index.html">Inicio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="Nosotros.html">Nosotros</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Servicio al cliente</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </section>

When I have the route "#" the active class is added to the item, but when I put a route "we.html" the active class is no longer added

$(function() {
    var item = $(".nav-item");
    item.click(function() {
        item.removeClass("active");
        $(this).addClass("active");
    });

});

what could it be?

javascript html css3

asked by Daniel Salinas 05.01.2019 в 19:04

source

1 answer

Query to compare record against previous SQL? [closed] Get the amount of array json type

score 0 · Accepted Answer

According to what you propose, you should add e.preventDefault() . For example:

$(function() {
    var item = $(".nav-item");
    item.click(function(e) {
        // Agregar:
        e.preventDefault();

        item.removeClass("active");
        $(this).addClass("active");
    });

});

If you are going to navigate between pages as if they were tabs, the following would not apply:

$(function() {
    var item = $(".nav-item");
    item.click(function(e) {
        // Agregar:
        e.preventDefault();

        item.removeClass("active");
        $(this).addClass("active");
    });

});

Instead it should be placed in: index.html

<section class="menu">
  <nav class="navbar navbar-expand-lg navbar-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav" id="nav-menu">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Inicio</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="Nosotros.html">Nosotros</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicio al cliente</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

In Nosotros.html:

<section class="menu">
  <nav class="navbar navbar-expand-lg navbar-light">

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav" id="nav-menu">
        <li class="nav-item">
          <a class="nav-link" href="index.html">Inicio</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="Nosotros.html">Nosotros</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicio al cliente</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

And so on.

As for the border in the item selected, you could add in your CSS code:

.nav-item {
  border: 1px solid transparent;
}
.active {
  border-color: #606060;
}