Setting list anchor to active based on click-CodePudding

I have the following list:

<!-- List -->
<ul >
  <li >
    <a  id="link1" href="{{ url_for('overview') }}">
      <i ></i>Overview
    </a>
  </li>
  <li >
    <a  href="{{ url_for('upload') }}">
      <i ></i> Upload file
    </a>
  </li>
  <li >
    <a  href="{{ url_for('choose_numeric') }}">
      <i ></i> Choose the numeric column
    </a>
  </li>
</ul>

It starts with the first list element as active. I want to change the active state based on the list element which is clicked.

I tried:

$('.steps-sampling').on('click','a', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

And (added id to anchor tag)

//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

But both do not work.

This is the .active class I could find for nav-link. I only have access to the min.css so it is kind of hard to find (not sure if this is sufficient)

.nav-link.active{border-color:#006673}

I cannot add active to the li element since it does not seem to work with the Bootstrap template I am using.

How can I solve this?

CodePudding user response：

Your code works well ,Except for styling ,

Just try to force style using !important to overide default bootstrap style

See below snippet :

$('.steps-sampling').on('click','a', function(){
   $(this).addClass('active').siblings().removeClass('active');
});

//on first time load set the home menu item active
$(".steps-sampling a#link1").addClass("active");

//on click remove active class from all li's and add it to the clicked li
$("a").click(function(){
   $("a").removeClass("active");
    $(this).addClass("active");
});

.active {
  color:green !important;
  font-weight:bold;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<!-- List -->
<ul >
  <li >
    <a  id="link1" href="#">
      <i ></i>Overview
    </a>
  </li>
  <li >
    <a  href="#">
      <i ></i> Upload file
    </a>
  </li>
  <li >
    <a  href="#">
      <i ></i> Choose the numeric column
    </a>
  </li>
</ul>

CodePudding user response：

Every time you set a function as listener to an event, when it fires it passes the event object to the function, you can just use it to know on which element the user has clicked:

$("a").click(function(evt){
    $("a").removeClass("active");
    $(evt.target).addClass("active");
});

I would like to suggest a more correct approach, with the same result:

$("a").on("click", function(evt){
    $("a").removeClass("active");
    $(evt.target).addClass("active");
});

Sometimes, depending on what you put inside the element that has the event bound, evt.target can be an element different from the one you bound the event on, so you must ensure that the element you style with the class is the correct one:

$("a").on("click", function(evt){
    $("a").removeClass("active");

    let tgt=evt.target;
    if(!$(tgt).is("a")) tgt = $(tgt).closest("a");
    $(tgt).addClass("active");
});

CodePudding user response：

After searching other solutions I found this which works.It has to do with the fact that the page is refreshed and is set back to active on the first element:

    <script>
      $(document).ready(function() {
        $('a.active').removeClass('active');
        $('a[href="'   location.pathname   '"]').closest('a').addClass('active');
      });
    </script>

CodePudding user response：

You can try this code :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
.nav-item .nav-link {text-decoration : none;}
.nav-item .nav-link:hover{ border: 2px solid #006673 !important; }
.nav-item .nav-link.active{ border: 2px solid #006673 !important; }
</style>
<script>
$(document).ready(function(){
  $(document).on('click','.nav-link', function(){
     $('.nav-link').removeClass('active');
     $(this).addClass('active');
  });
});
</script>
</head>
<body>

<!-- List -->
<ul >
  <li >
    <a  id="link1" href="#">
      <i ></i>Overview
    </a>
  </li>
  <li >
    <a  href="#">
      <i ></i> Upload file
    </a>
  </li>
  <li >
    <a  href="#">
      <i ></i> Choose the numeric column
    </a>
  </li>
</ul>

</body>
</html>