Fatal编程技术网
  • javascript/
  • Javascript 如何在单击页面时保持活动链接点亮？

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

javascript jquery

Javascript 如何在单击页面时保持活动链接点亮？,javascript,jquery,Javascript,Jquery,我的页面上有一组按钮，每一个按钮在点击时都会调用一个javascript函数；单击时，活动链接颜色将亮起，但单击页面上的其他位置时，活动链接颜色将被清除。我希望它一直亮着，除非我点击另一个按钮链接 以下是如何构造链接的示例（共有10个链接）： 我知道默认行为是在单击其他位置时清除活动链接颜色，但我应该能够使用javascript或jquery获取活动链接的值并保持其相同颜色（除非我单击其他链接）；我发现只有两篇文章很接近，但其中一篇是特定于列表项（li）的，而不是一个按钮类，其上有一个oncli

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

以下是如何构造链接的示例（共有10个链接）：

我知道默认行为是在单击其他位置时清除活动链接颜色，但我应该能够使用javascript或jquery获取活动链接的值并保持其相同颜色（除非我单击其他链接）；我发现只有两篇文章很接近，但其中一篇是特定于列表项（li）的，而不是一个按钮类，其上有一个onclick处理程序（不是锚定标记）。上的另一篇文章展示了一个特定于锚定标记的jquery函数；我这样修改它：

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


var项目=$（“按钮_01”）；
项目。removeClass（“活动”）；
$（此）.toggleClass（“活动”）；
});
这是行不通的，如果脚本已经就位，链接也就行不通了

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

非常感谢你在这方面的帮助

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

假设您所有的按钮都有
class=“button\u 01”

$（'.button_01'）。在（'click'，function（）上{
$（'.button_01'）。removeClass（'active'）；
$（this.addClass（'active'）；
});

.active{
背景：红色；
}



按钮1
按钮2

按钮3
假设您所有的按钮都有
class=“Button\u 01”



$（'.button_01'）。在（'click'，function（）上{
$（'.button_01'）。removeClass（'active'）；
$（this.addClass（'active'）；
});

.active{
背景：红色；
}



按钮1
按钮2
按钮3
如果活动属性仍在站点上单击，则可以在jquery中使用.css（）属性


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


如果活动属性仍在站点上单击，则可以在jquery中使用.css（）属性


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



我只是随便摆弄了一下我认为可能解决你问题的办法。我用pureJs做过



功能显示页（e页）{
//执行将颜色重置为默认值的功能
重置颜色（）；
//调用hide here，因为每次显示页面时都会这样做
HideDropdown（）；
e、 类列表。添加（“活动”）；
//在这里做事
}
函数HideDropdown（）{
//在这里做事
}
函数resetColors（）{
//在这里做事
}



.active{
颜色：红色！重要；
}



A.
B
C
D

我只是快速修改了一下我认为可能解决您问题的方法。我用pureJs做过



功能显示页（e页）{
//执行将颜色重置为默认值的功能
重置颜色（）；
//调用hide here，因为每次显示页面时都会这样做
HideDropdown（）；
e、 类列表。添加（“活动”）；
//在这里做事
}
函数HideDropdown（）{
//在这里做事
}
函数resetColors（）{
//在这里做事
}



.active{
颜色：红色！重要；
}



A.
B
C
D

经过大量的研究和工作，下面是我如何解决这个问题的

请记住，我有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>




函数更改颜色（事件）{
对于（i=1；i<11；i++）{
ID_Name=“btn0”+i.toString（）；
如果（i>=10）{ID_Name=“btn”+i.toString（）；}
var elem=document.getElementById（ID\u名称）；
TargetClass=event.target.getAttribute（'class'）；
TargetID=event.target.getAttribute（'id'）；
var active=document.activeElement；
var equal=（LastActiveElement==ID\u Name）；
tfh=TargetID==“汉堡包容器”；
如果（（equal==“true”）&&（TargetClass！=“button_01”）&&&（tfh==“false”））{
var newColor=“rgb（175222162）”；
elem.style.color=newColor；}
如果（TargetClass==“button_01”）{elem.style.color=“rgb（100100）”；}
if（TargetID==ID_Name）{elem.style.color=“rgb（175222162）”；}
}
}
var-LastActiveElement；
函数getLastGAE（事件）{
LastActiveElement=全局活动元素；
}
var-GlobalActivieElement；
函数getFocusElement（事件）{
var active=document.activeElement；
TargetID=event.target.getAttribute（'id'）；
GlobalActivieElement=TargetID；
}


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

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

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


感谢所有回答这个问题的人
 经过大量的研究和工作，下面是我如何解决这个问题的

请记住，我有10个链接，每个链接都有一个唯一的ID号，因此我循环使用它们1-10并创建ID名称（例如，btn04）。为了保持当前活动链接点亮，我必须更改

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