Keeping A: Active Until Another Link Is Clicked

keeping a: active until another link is clicked

HTML: (Added onclick="clickSingleA(this)" and class="single" attributes.)

To have one of the links activated by default, just add active class

<div align="right"><a onclick="clickSingleA(this)" class="single active" href="me1.cfm?pic_ws=80&typ=1" target="mnfrm3">ME1</A></div><br>
<div align="right"><a onclick="clickSingleA(this)" class="single" href="me2.cfm?pic_ws=80&typ=1" target="mnfrm3">ME2</A></div><br>
<div align="right"><a onclick="clickSingleA(this)" class="single" href="me3.cfm?pic_ws=80&typ=1" target="mnfrm3">ME3</A></div><br>

CSS: (added a.active)

a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #C65B05;
}

a:hover, a.active   
{
    text-decoration: none;
    color: #03B003;
}

JavaScript: (function to activate links, and remove old active)

function clickSingleA(a)
{
    items = document.querySelectorAll('.single.active');

    if(items.length) 
    {
        items[0].className = 'single';
    }

    a.className = 'single active';
}

Keep the button active until I click another button (Without affecting all website buttons)

You can create a class called active and use jquery to add this class to the clicked link (and remove from the others).

See this working snippet:

$(document).ready(function(){
  $('.getnowbutton').click(function(){
    $('.getnowbutton').removeClass('active');
    $(this).addClass('active');
  });
});

.active {
  background-color: white;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<li><a class="btn btn-sm mb-3 getnowbutton getnowbutton1" href="#" data-toggle="tab">3 Months</a></li>
<li><a href="#" class="btn btn-sm mb-3 getnowbutton getnowbutton1" data-toggle="tab">6 Months</a></li>
<li><a href="#" class="btn btn-sm mb-3 getnowbutton getnowbutton1" data-toggle="tab">1 Year</a></li>

Maintaining active of button until another button is clicked

In bootstrap 4 you can use btn-group-toggle:

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

This should solve your problem because it will use this button like checkboxes.

how to Keep the color of active link constant, until i press other link

That's not what :active pseudo class was meant to do. You can use javascript for this. If you use jQuery, than you can do something like:

var items = $("a");
items.on("click",function(){
  items.removeClass("active");
  $(this).toggleClass("active");
});

and add "active" css rule

a.active {
 background-color:#C99;
}

See fiddle http://jsfiddle.net/QQb27/

How to keep one image button active until another is clicked

I suggest you to use a instead of img and set the background-image.
On click, remove the CSS class active and add it to the clicked button.

Here is the code:

<head>
    <style type="text/css">
        .menu-btn {
            width: 16px;
            height: 16px;
            display: inline-block;
        }

        .menu-btn-1 {
            background: url('xxx.jpg') no-repeat center;
        }

        .menu-btn-1:hover {
            background: url('xxx_hover.jpg') no-repeat center;
        }
        .menu-btn-1.active {
            background: url('xxx_onClick.jpg') no-repeat center;
        }

        .menu-btn-2 {
            background: url('xxx.jpg') no-repeat center;
        }

        .menu-btn-2:hover {
            background: url('xxx_hover.jpg') no-repeat center;
        }
        .menu-btn-2.active {
            background: url('xxx_onClick.jpg') no-repeat center;
        }

        ...
    </style>
</head>

<body>
    <a href="#" class="menu-btn menu-button-1"></a>
    <a href="#" class="menu-btn menu-button-2"></a>
    <a href="#" class="menu-btn menu-button-3"></a>
    <a href="#" class="menu-btn menu-button-4"></a>
    <a href="#" class="menu-btn menu-button-5"></a>
</body>

<script type="text/javascript">
    $(function() {
        $(".menu-btn").on("click", function(e) {
            e.preventDefault();
            $(".menu-btn.active").removeClass("active");
            $(this).addClass("active");

            //Do more things
        });
    });
</script>

Edit:

Since you have a different image for each button, you should add a class to handle the background-image. I edited the code above.

If you prefer to use javascript instead, you could listen to the mouseover and click events and change the background-image in jQuery.

If clicked, give active class until another element is clicked, then give the second element active class and remove the active class from the first

Hopefully this gets you going in the right direction:

(function() {  var app = angular.module('tileApp', []);
  app.controller('TileController', function() {    this.activeTile = null;    this.someButtons = [{      title: 'title1',      data: 'data1',    }, {      title: 'title2',      data: 'data2',    }, {      title: 'title3',      data: 'data3',    }];;
    this.clickButton = function(index) {      this.activeTile = index;    }  });})();

.tileContainer {   display: grid;   gap: 20px;   grid-template-columns: repeat(3, 1fr);}
.tile {   color: purple;   border: 1px solid purple;   padding: 20px;   cursor: pointer;}
.tile.active {  font-weight: 900;  color: deeppink;  border: 1px solid deeppink;  background: pink;}

<html lang="en">  <head>    <meta charset="UTF-8" />    <title>Document</title>    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>  </head>  <body ng-app="tileApp">    <center><h1>Active Tile</h1></center>    <div class="tileContainer" ng-controller="TileController as tile">        <div class="tile" ng-click="tile.clickButton($index)" ng-repeat="button in tile.someButtons" ng-class="tile.activeTile === $index ? 'active' : ''">           <div>{{button.title}}</div>           <div>{{button.data}}</div>        </div>      </div>  </body></html>

using css and javascript onclick, link color change when they are clicked and being activated untill I click other link

You can use :active along with :hover:

#Space li:active,
#Space li:hover {
  border-bottom: 5px solid #6495ED;
}

Now, this kinda stays till you click another link. But there are better methods using <input type="radio" /> that persists.

#Space li {  display: inline;  margin-left: 10px;  padding-bottom: 11px;}
#Space li:focus,#Space li:hover {  border-bottom: 5px solid #6495ED;  outline: 0;}

<div id="Space">  <ul>    <li role="presentation" class="sort" tabindex="1">      <a href="#" style="text-decoration:none;">hot</a>    </li>    <li role="presentation" class="date" tabindex="1">      <a href="#" style="text-decoration:none;">update</a>    </li>  </ul></div>

Keeping A: Active Until Another Link Is Clicked