Keep the link underlined until a different button is pressed

Question

Keep the link underlined until a different button is pressed

I need help with a webpage that displays a list of partners organized by categories.

When clicking on sidebar categories, the link remains underlined. However, if you click anywhere else on the page, the link becomes inactive.

CSS:

button:hover { 
    text-decoration: underline;
    color:#000;
}
button:focus { 
    text-decoration: underline;
    color:#000;
}
button:active { 
    text-decoration: underline;
    color:#000;
}
button:visited { 
    text-decoration: underline;
    color:#000;
}

HTML:

<button id="showall" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

Is there a way for the link to remain underlined unless other category buttons are clicked?

Appreciate any assistance!

javascript jquery html css

Answer 1

Answer №1

By using jQuery, you have the ability to add a class with an underline on click events.

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

button:hover, button:focus, button:active, button:visited, .active { 
    text-decoration: underline;
    color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showall" class="active" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

A more JavaScript-focused approach would look something like this...

var buttons = document.getElementsByTagName("button");

function setActive(el) {
  for (var i = 0; i < buttons.length; i++) {
      if (buttons[i] == el) {
        el.classList.toggle("active");
      } else {
        buttons[i].classList.remove('active');
      }
    }
}

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    setActive(this);
  });
}

button:hover, button:focus, button:active, button:visited, .active { 
    text-decoration: underline;
    color:#000;
}

<button id="showall" class="active" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

Answer 2

By using jQuery, you have the ability to add a class with an underline on click events.

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

button:hover, button:focus, button:active, button:visited, .active { 
    text-decoration: underline;
    color:#000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="showall" class="active" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

A more JavaScript-focused approach would look something like this...

var buttons = document.getElementsByTagName("button");

function setActive(el) {
  for (var i = 0; i < buttons.length; i++) {
      if (buttons[i] == el) {
        el.classList.toggle("active");
      } else {
        buttons[i].classList.remove('active');
      }
    }
}

for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    setActive(this);
  });
}

button:hover, button:focus, button:active, button:visited, .active { 
    text-decoration: underline;
    color:#000;
}

<button id="showall" class="active" style="border:none;">All Deals</button>
<button id="show" style="border:none;">Business</button>
<button id="show2" style="border:none;">Design</button>
<button id="show3" style="border:none;">Development</button>
<button id="show4" style="border:none;">Marketing</button>

Answer 3

Answer №2

If you want to enhance the appearance of your links, consider adding a custom class like "sidebarbuttons" to each one and implementing the following JavaScript code for onclick events:

$(".sidebarbuttons").on("click", function() { 
   $(".sidebarbuttons").not(this).each(function() { 
      $(this).css("text-decoration","none");
   });
   $(this).css("text-decoration","underline");
});

By utilizing this script, you can remove underlines from all elements assigned with the class "sidebarbuttons" and apply an underline only to the specific link that is clicked.

Answer 4

If you want to enhance the appearance of your links, consider adding a custom class like "sidebarbuttons" to each one and implementing the following JavaScript code for onclick events:

$(".sidebarbuttons").on("click", function() { 
   $(".sidebarbuttons").not(this).each(function() { 
      $(this).css("text-decoration","none");
   });
   $(this).css("text-decoration","underline");
});

By utilizing this script, you can remove underlines from all elements assigned with the class "sidebarbuttons" and apply an underline only to the specific link that is clicked.

Answer 5

Answer №3

Only one link should be active at a time. Follow these steps to achieve that:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index950</title>
    <style type="text/css">
        .keepShow {
            text-decoration: underline;
            color: #000;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".ap").click(function (event) {
                $(".ap").removeClass("keepShow");
                $(this).addClass("keepShow");
            })
        })
    </script>
</head>
<body>
    <div>
        <button id="showall" class="ap" style="border:none;">All Deals</button>
        <button id="show" class="ap" style="border:none;">Business</button>
        <button id="show2" class="ap" style="border:none;">Design</button>
        <button id="show3" class="ap" style="border:none;">Development</button>
        <button id="show4" class="ap" style="border:none;">Marketing</button>
    </div>
</body>
</html>

Answer 6

Only one link should be active at a time. Follow these steps to achieve that:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index950</title>
    <style type="text/css">
        .keepShow {
            text-decoration: underline;
            color: #000;
        }
    </style>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $(".ap").click(function (event) {
                $(".ap").removeClass("keepShow");
                $(this).addClass("keepShow");
            })
        })
    </script>
</head>
<body>
    <div>
        <button id="showall" class="ap" style="border:none;">All Deals</button>
        <button id="show" class="ap" style="border:none;">Business</button>
        <button id="show2" class="ap" style="border:none;">Design</button>
        <button id="show3" class="ap" style="border:none;">Development</button>
        <button id="show4" class="ap" style="border:none;">Marketing</button>
    </div>
</body>
</html>

Answer 7

Answer №4

Using basic vanilla JavaScript:

const buttons = document.querySelectorAll(".wpb_wrapper button");
buttons.forEach(function(button, index){
  button.addEventListener('click', function(){
    // Remove active classes from all other buttons first
    document.querySelectorAll(".wpb_wrapper button").forEach(function(btn){
      btn.classList.remove("active");
    });
    this.classList.toggle("active"); // Toggle active class on current button
  });
});

Answer 8

Using basic vanilla JavaScript:

const buttons = document.querySelectorAll(".wpb_wrapper button");
buttons.forEach(function(button, index){
  button.addEventListener('click', function(){
    // Remove active classes from all other buttons first
    document.querySelectorAll(".wpb_wrapper button").forEach(function(btn){
      btn.classList.remove("active");
    });
    this.classList.toggle("active"); // Toggle active class on current button
  });
});

Keep the link underlined until a different button is pressed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Monitoring separate upload progress within $q.all() in AngularJS

Bypass license and credit comments when compressing JavaScript with YUIcompressor

What is the best way to adjust the placement of this object so it is anchored to the left side?

Connecting to a MongoDB or Mongoose database dynamically using Node.js

Creating a custom ID for a Firebase POST request

Having trouble retrieving AJAX data [PHP]

Shut down the angular modal

Ensuring the accuracy of URLs using JavaScript

Skipping MongoDB in loop operations in a Node.js environment.The original text was modified to

Use jQuery to set different background images for multiple divs at random time intervals

Divide the parsed rss findings into separate parts

"Activate the parent window by navigating using the accesskey assigned to the href

Displaying a clock using PHP

Transfer an Array of Objects containing images to a POST API using Angular

Error in AngularJS: Unable to access property 'get' as it is undefined

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Selenium WebDriver in Java is able to detect hidden elements by checking if they are displayed or not

Issues with rendering Vue 3 component, visible in the elements tree but not displaying on the screen

Having trouble with UseSelector in React Redux?

Exploring Angular controller inheritance and the ability to override methods from a superclass