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

Question

我的页面上有一组按钮，每个按钮在单击时都会调用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），而不是如何获取活动链接ID的带有onclick处理程序的按钮类（不是锚标签）。 另一篇有关如何保持活动链接颜色不变的文章，直到我按其他链接为止，显示了特定于锚标签的jquery函数； 我这样修改它：

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

那是行不通的，使用该脚本后，链接将不起作用。

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

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

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

Answer 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>

Answer 2

如果active属性仍在您的网站上点击，则可以在jquery中使用.css（）属性。

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

Answer 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>

Answer 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中的两个数据元素，因此占用的空间可忽略不计。

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

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

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

问题描述

4 个解决方案

解决方案1
1 2018-11-07 16:50:10

解决方案2
1 2018-11-07 16:55:04

解决方案3
0

解决方案4
0 2018-11-08 01:01:21

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

问题描述

4 个解决方案

解决方案1 1 2018-11-07 16:50:10

解决方案2 1 2018-11-07 16:55:04

解决方案3 0

解决方案4 0 2018-11-08 01:01:21

解决方案1
1 2018-11-07 16:50:10

解决方案2
1 2018-11-07 16:55:04

解决方案3
0

解决方案4
0 2018-11-08 01:01:21