单击页面时如何保持活动链接点亮？答案

【问题标题】：How to keep the active link lit when clicking on the page?单击页面时如何保持活动链接点亮？
【发布时间】：2018-11-08 09:02:56
【问题描述】：

我的页面上有一组按钮，每个按钮在点击时都会调用一个 javascript 函数；单击时，活动链接颜色会亮起，但是当我单击页面上的其他位置时，活动链接颜色会被清除。我希望它保持亮起，除非我单击另一个按钮链接。

这里是一个链接是如何构建的示例（有 10 个链接）：

<div class="C1"><br><button class="button_01" onclick="HideDropdown(); ShowPage(7);">FAQs</button></div>

这是按钮和 C1 类的 css：

.button_01 {
    background-color: rgb(0,2,3);
    border: none;
    color: rgb(100,100,100);
    font-family: camphorW01-Thin,calibri,arial;
    text-align: left;
    text-decoration: none;
    font-size: 13pt;
    cursor: pointer;
    transition: all 150ms ease-in;
}

.button_01:hover { color: rgb(175,222,162); }
.button_01:active { color: rgb(175,222,162); }
.button_01:focus { color: rgb(175,222,162); }
.button_01:visited { color: rgb(175,222,162); }

.C1{
    color:#DBDBDB;
    font-family: sans-serif;
    font-size: 14pt;
    text-indent: 0px;
    width: auto;
    margin: auto;
}

我知道默认行为是在单击其他位置时清除活动链接颜色，但我应该能够使用 javascript 或 jquery 获取活动链接的值并保持其颜色相同（除非我单击另一个关联）;我发现只有两个帖子接近但一个是特定于列表项 (li) 的，而不是在 How to get the ID of an active link 的带有 onclick 处理程序（不是锚标记）的按钮类。 how to Keep the color of active link constant, until i press other link 的另一篇文章展示了一个特定于锚标签的 jquery 函数；我是这样修改的：

<script>
var items = $("button_01");
      items.removeClass("active");
      $(this).toggleClass("active");
    });
<script>

这不起作用，并且使用该脚本，链接不起作用。

所以我的问题是：如何在具有 onclick 处理程序以调用 javascript（相对于列表项或锚标记）的按钮上保持活动链接颜色亮起？

非常感谢您对此提供的任何帮助。

编辑：我解决了这个问题并在下面发布了答案。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

假设你所有的按钮都有class="button_01"

$('.button_01').on('click', function(){
  $('.button_01').removeClass('active');
  $(this).addClass('active');
});

.active {
background:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button_01">Button 1</button>
<button class="button_01">Button 2</button>
<button class="button_01">Button 3</button>

【讨论】：

感谢 Dirk，但这会从突出显示的链接中删除活动链接并将其放置在当前单击的链接上，这是默认行为。我需要的是在点击任何地方但另一个链接时保持活动链接点亮的东西。
我可能遗漏了一些东西，您单击的按钮将使该类处于活动状态，直到您单击同一类的另一个按钮
不，默认行为是在单击页面上的其他位置时清除 - 这是活动链接颜色。
状态:active被清除，类.active将保留
我会尝试这样做，因为我目前正在使用 :active。我会让你知道会发生什么。

【解决方案2】：

如果 active 属性仍在您的网站上单击，您可以在 jquery 中使用 .css() 属性。

$('.button_class').on('click', function() {
$('.button_class').removeAttr('style');
$(this).css('backgroundColor', 'red');
});

【讨论】：

【解决方案3】：

我只是对我认为可能解决您的问题的方法进行了快速调整。我已经在 pureJs 中完成了。

function ShowPage(e,page){
  // do a function to reset colors to default
  resetColors();
  // call hide here, since you do it everytime you show a page
  HideDropdown();
  e.classList.add("active");  
  //do stuff here
}

function HideDropdown(){
  // do stuff here
}

function resetColors(){
  // do stuff here
}

.active{
  color: red !important; 
}

<div class="C1">
  <button class="wathever" onclick="ShowPage(this,7);">A</button>
  <button class="wathever" onclick="ShowPage(this,7);">B</button>
  <button class="wathever" onclick="ShowPage(this,7);">C</button>
  <button class="wathever" onclick="ShowPage(this,7);">D</button>
</div>

【讨论】：

【解决方案4】：

经过大量研究和工作，这就是我解决这个问题的方法。

请记住，我有 10 个链接，每个链接都有一个唯一的 ID 号，因此我循环遍历它们 1-10 并创建 ID 名称（例如 btn04）。为了保持当前活动链接亮起，当我单击页面上的任何位置时，我必须将链接颜色更改为活动链接颜色，但相同类型的另一个链接（button_01 类）除外。为此，我需要在每次单击按钮时将活动元素存储在全局变量中，以便在任何后续单击时，我们都知道最后一个活动元素是什么，但是后续单击会将活动元素更改为当前单击的元素。该怎么办？我设置了另一个全局变量 LastActiveElement，它捕获最近设置的活动元素。现在我知道最后一次点击在哪里——如果它是一个超链接并且当前点击不是一个超链接，我将最后一次点击的超链接颜色改回它的活动颜色，这具有保持它保持相同颜色的效果。

将这个添加到body标签：

<body onload="ShowABC(1);" onclick="changeColor(event); getLastGAE(event); getFocusElement(event);">

<script>
function changeColor(event) {

  for (i = 1; i < 11; i++) {
    ID_Name = "btn0" + i.toString();
    if (i >= 10){ID_Name = "btn" + i.toString();}

    var elem = document.getElementById(ID_Name);

    TargetClass = event.target.getAttribute('class');
    TargetID = event.target.getAttribute('id');
    var active = document.activeElement;
    var equal = (LastActiveElement == ID_Name);
    tfh = TargetID == "hamburger_container";

    if ((equal == "true") && (TargetClass != "button_01") && (tfh == "false")){
        var newColor = "rgb(175,222,162)";
        elem.style.color = newColor; }
    if (TargetClass == "button_01"){ elem.style.color = "rgb(100,100,100)"; }
    if (TargetID == ID_Name){ elem.style.color = "rgb(175,222,162)"; }
  }
}
</script>

<script>
var LastActiveElement;
    function getLastGAE(event) {
    LastActiveElement = GlobalActiveElement;
}
</script>

<script>
var GlobalActiveElement;
    function getFocusElement(event) {
    var active = document.activeElement;
    TargetID = event.target.getAttribute('id');
    GlobalActiveElement = TargetID;
}
</script>

这样，如果我单击页面上除同一类的另一个超链接之外的任何位置，活动链接颜色不会改变。

现在我知道一些建议不要使用全局变量，但这只是添加到 DOM 中的两个数据元素，因此它占用的空间可以忽略不计。

当然，可能还有其他解决方案，但这是我想出的。

感谢所有回答此问题的人。

【讨论】：