skip to Main Content

I have a page that we are trying to change to where 2 different categories of leadership are loaded upon the click of a button. Rather than having them placed one on top of the other. I was able to implement the change of the leadership categories on the click of the leadership group button. However, I cannot get the button to stay underlined when that category is active on page load or after clicking anywhere other than a button.

https://auduboncosites.wpengine.com/who-we-are/leadership/

I have tried a few different solutions, but they don’t seem to be working for my issue and the solutions I found are pretty old. I don’t actually think the JS I am using is doing anything in this instance and it’s all currently underlining based on CSS.

CSS:

.active:focus, .active:active, .active:visited {
    text-decoration: underline;
}

JS:

var $buttons = jQuery('button');
$buttons.on('click',function() {
  jQuery(this).toggleClass('active').siblings('button').removeClass('active');
})

I hope someone can help me find a solution.

Thanks,

2

Answers


  1. So that’s just how the :focus state in HTML/CSS works. You have clicked on something, and that now has your focus until you click on something else. See my demo below. When something has focus it will have a green border. Click on one and it has focus. Click away or press tab to change the focus.

    Just remove your :focus styles if you don’t want that to happen.

    button {
      border: 4px solid #333;
      font-weight: bold;
      font-size: 16px;
    }
    
    button:active {
      color: red;
    }
    
    button:focus {
      border-color: lightgreen;
      outline: none;
    }
    <button type="button">one</button>
    <button type="button">two</button>
    <button type="button">three</button>

    Revised/Edited answer

    I wasn’t aware that you wanted to keep the link underlined. In that case this is even easier. You simply just need to apply a class when it’s selected and remove it from the others. It’s very close to the code you already posted, but I think you just need to have simpler CSS without messing with the :focus state. If the class is applied, it looks active. that’s it.

    Here’s a version using jQuery.

    var $buttons = $('button');
    $buttons.on('click', function() {
      $(this).addClass('active').siblings('button').removeClass('active');
    });
    button {
      padding: 5px;
      font-weight: bold;
    }
    
    .active {
      text-decoration: underline;
      background-color: lightgreen;
    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <button type="button">one</button>
    <button type="button">two</button>
    <button type="button">three</button>

    And here’s a version that does the same, but without jQuery being required.

    document.querySelectorAll('button').forEach(function(thisBtn) {
      thisBtn.addEventListener('click', function() {
        var prevBtn = document.querySelector('button.active');
        if(prevBtn) {
          prevBtn.classList.remove('active');
        }
        
        thisBtn.classList.add('active');
      }, false);
    });
    button {
      padding: 5px;
      font-weight: bold;
    }
    
    .active {
      text-decoration: underline;
      background-color: lightgreen;
    }
    <button type="button">one</button>
    <button type="button">two</button>
    <button type="button">three</button>
    Login or Signup to reply.
  2. As I understand from the question and the attached code, you want a specific button to be styled when click, and this effect should not be affected when clicking elsewhere. The code you provided contains more details. You must have a focused button that contains an active class, and you want the effect to continue even when the button is not focused . It is enough to rely on the class alone without depending on focus.

     Here's a code for the solution:
    
     https://codepen.io/mohammed-albadry/pen/wvQaPLq.
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search