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），而不是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（相对于列表项或锚标记）的按钮上保持活动链接颜色点亮？

非常感谢您的帮助。

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

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 个答案: