Javascript 如何更改已单击元素和当前元素的样式？
我想更改单击元素的类，并从当前元素中删除该类。我目前的代码也可以工作，但我正在寻找一种更干净/自动的方式。所以我在寻找一种类似这样的方式：从所有现有元素中删除类，并将其添加到单击的元素中 我当前的代码： document.getElementById'hotelgids-tab-1'。addEventListener'click'，showForm1； document.getElementById'hotelgids-tab-2'。addEventListener'click'，showForm2； document.getElementById'hotelgids-tab-3'。addEventListener'click'，showForm3； document.getElementById'hotelgids-tab-4'。addEventListener'click'，showForm4； 函数showForm1{ 这个.classList.add'activetab'； document.getElementById'hotelgids-tab-2'。classList.remove'activetab'； document.getElementById'hotelgids-tab-3'。classList.remove'activetab'； document.getElementById'hotelgids-tab-4'。classList.remove'activetab'； } 函数showForm2{ 这个.classList.add'activetab'； document.getElementById'hotelgids-tab-1'。classList.remove'activetab'； document.getElementById'hotelgids-tab-3'。classList.remove'activetab'； document.getElementById'hotelgids-tab-4'。classList.remove'activetab'； } 函数showForm3{ 这个.classList.add'activetab'； document.getElementById'hotelgids-tab-1'。classList.remove'activetab'； document.getElementById'hotelgids-tab-2'。classList.remove'activetab'； document.getElementById'hotelgids-tab-4'。classList.remove'activetab'； } 函数showForm4{ 这个.classList.add'activetab'； document.getElementById'hotelgids-tab-2'。classList.remove'activetab'； document.getElementById'hotelgids-tab-3'。classList.remove'activetab'； document.getElementById'hotelgids-tab-1'。classList.remove'activetab'； } 阿夫罗·博德 瓦拉特罗斯米克罗 Avro Kro NCRV 瓦拉特罗斯米克罗 document.getElementById'hotelgids-tab-1'。addEventListener'click'，changecollorofme； document.getElementById'hotelgids-tab-2'。添加EventListener'click'，changecollorofme； document.getElementById'hotelgids-tab-3'。添加EventListener'click'，changecollorofme； document.getElementById'hotelgids-tab-4'。添加EventListener'click'，changecollorofme； 函数变换{ //禁用所有元素 var allegements=document.querySelectorAll'.form tabs submit'； 等位基因{ 元素。类列表。删除“activetab”； } 这个.classList.add'activetab'； } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .表单选项卡提交：：类型的第一个{ 边界半径：4px 0px 0px 0px } .表单选项卡提交：：类型的最后一个{ 边界半径：0px 4px 0px 0px； } 阿夫罗·博德 活动geldig t/m 31 oktober 瓦拉特罗斯米克罗 活动geldig t/m 12月31日 Avro Kro NCRV 1月31日起生效日期 瓦拉特罗斯米克罗 活动geldig t/m 31 maart document.getElementById'hotelgids-tab-1'。addEventListener'click'，changecollorofme； document.getElementById'hotelgids-tab-2'。添加EventListener'click'，changecollorofme； document.getElementById'hotelgids-tab-3'。添加EventListener'click'，changecollorofme； document.getElementById'hotelgids-tab-4'。添加EventListener'click'，changecollorofme； 函数变换{ //禁用所有元素 var allegements=document.querySelectorAll'.form tabs submit'； 等位基因{ 元素。类列表。删除“activetab”； } 这个.classList.add'activetab'； } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .表单选项卡提交：：类型的第一个{ 边界半径：4px 0px 0px 0px } .表单选项卡提交：：类型的最后一个{ 边界半径：0px 4px 0px 0px； } 阿夫罗·博德 活动geldig t/m 31 oktober 瓦拉特罗斯米克罗 活动geldig t/m 12月31日 Avro Kro NCRV 1月31日起生效日期 瓦拉特罗斯米克罗 活动geldig t/m 31 maartJavascript 如何更改已单击元素和当前元素的样式？,javascript,Javascript,我想更改单击元素的类，并从当前元素中删除该类。我目前的代码也可以工作，但我正在寻找一种更干净/自动的方式。所以我在寻找一种类似这样的方式：从所有现有元素中删除类，并将其添加到单击的元素中 我当前的代码： document.getElementById'hotelgids-tab-1'。addEventListener'click'，showForm1； document.getElementById'hotelgids-tab-2'。addEventListener'click'，showFo
这应该可以完成以下工作：
document.getElementsBySelector('.form-tabs-submit').addEventListener('click', activateElement); // Listen to every element by class instead of each one by id
function activateElement(currentElement) {
// Disable all elements
var allElements = document.querySelectorAll('.form-tabs-submit');
allElements.forEach(function(element) {
element.classList.remove('activetab');
}
// Activate the current element
currentElement.classList.add('activetab');
}
document.getElementsBySelector('.form-tabs-submit').addEventListener('click', activateElement); // Listen to every element by class instead of each one by id
function activateElement(currentElement) {
// Disable all elements
var allElements = document.querySelectorAll('.form-tabs-submit');
allElements.forEach(function(element) {
element.classList.remove('activetab');
}
// Activate the current element
currentElement.classList.add('activetab');
}
您可以通过以下方式优化代码： //使用hotelgids选项卡获取以id开头的所有选项卡- var all=document.querySelectorAll'[id^=hotelgids tab-]； //循环浏览它们以点击事件 all.forEachel=>el.addEventListener'click'，showForm； 函数showForme{ //将类从所有 all.forEachel=>el.closest'div'。classList.remove'activetab'； //将类添加到单击的选项卡 e、 最接近的'div'。类列表。添加'activetab'； } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } 阿夫罗·博德 活动geldig t/m 31 oktober 瓦拉特罗斯米克罗 活动geldig t/m 12月31日 Avro Kro NCRV 1月31日起生效日期 瓦拉特罗斯米克罗 活动geldig t/m 31 maart
您可以通过以下方式优化代码： //使用hotelgids选项卡获取以id开头的所有选项卡- var all=document.querySelectorAll'[id^=hotelgids tab-]； //循环浏览它们以点击事件 all.forEachel=>el.addEventListener'click'，showForm； 函数showForme{ //将类从所有 all.forEachel=>el.closest'div'。classList.remove'activetab'； //将类添加到单击的选项卡 e、 最接近的'div'。类列表。添加'activetab'； } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } 阿夫罗·博德 活动geldig t/m 31 oktober 瓦拉特罗斯米克罗 活动geldig t/m 12月31日 Avro Kro NCRV 1月31日起生效日期 瓦拉特罗斯米克罗 活动geldig t/m 31 maart 您可以使用and方法将代码简化为几行 首先通过它获取所有元素，然后从选项卡中删除所有activeTab类。使用仅添加到单击的元素 现场演示： 让getTabs=document.querySelectorAll'.formtabs提交' getTabs.forEachfunctiontab{ tab.addEventListener“单击”，函数E{ getTabs.forEachfunctiontab{ tab.classList.删除'activetab' } e、 target.classList.add'activetab' } } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .表单选项卡提交：：类型的第一个{ 边界半径：4px 0px 0px 0px } .表单选项卡提交：：类型的最后一个{ 边界半径：0px 4px 0px 0px； } .集装箱{ 显示器：flex； } 阿夫罗·博德 瓦拉特罗斯米克罗 Avro Kro NCRV 瓦拉特罗斯米克罗 您可以使用and方法将代码简化为几行 首先通过它获取所有元素，然后从选项卡中删除所有activeTab类。使用仅添加到单击的元素 现场演示： 让getTabs=document.querySelectorAll'.formtabs提交' getTabs.forEachfunctiontab{ tab.addEventListener“单击”，函数E{ getTabs.forEachfunctiontab{ tab.classList.删除'activetab' } e、 target.classList.add'activetab' } } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .表单选项卡提交：：firs t型{ 边界半径：4px 0px 0px 0px } .表单选项卡提交：：类型的最后一个{ 边界半径：0px 4px 0px 0px； } .集装箱{ 显示器：flex； } 阿夫罗·博德 瓦拉特罗斯米克罗 Avro Kro NCRV 瓦拉特罗斯米克罗 试试这个： document.getElementById'hotelgids-tab-1'。addEventListener'click'，函数{showMethis}； document.getElementById'hotelgids-tab-2'。addEventListener'click'，函数{showMethis}； document.getElementById'hotelgids-tab-3'。addEventListener'click'，函数{showMethis}； document.getElementById'hotelgids-tab-4'。addEventListener'click'，函数{showMethis}； 函数showMed{ 设thisDiv=d.id； 让allItems=document.getElementByIdhotelgids.querySelectorAlldiv； 大蒜素{ 如果g.id==thisDiv{ g、 classList.removeinactivetab； g、 classList.addactivetab； }否则{ g、 classList.removeactivetab； g、 classList.addinactivetab； } } } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab>span{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .form-tabs-submit.inactivetab>span{ 显示：无； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .表单选项卡提交：类型的第一个{ 边界半径：4px 0px 0px 0px } .表单选项卡提交：类型的最后一个{ 边界半径：0px 4px 0px 0px； } span{显示：块} 阿夫罗·博德 活动geldig t/m 31 oktober 瓦拉特罗斯米克罗 活动geldig t/m 12月31日 Avro Kro NCRV 1月31日起生效日期 瓦拉特罗斯米克罗 活动geldig t/m 31 maart 试试这个： document.getElementById'hotelgids-tab-1'。addEventListener'click'，函数{showMethis}； document.getElementById'hotelgids-tab-2'。addEventListener'click'，函数{showMethis}； document.getElementById'hotelgids-tab-3'。addEventListener'click'，函数{showMethis}； document.getElementById'hotelgids-tab-4'。addEventListener'click'，函数{showMethis}； 函数showMed{ 设thisDiv=d.id； 让allItems=document.getElementByIdhotelgids.querySelectorAlldiv； 大蒜素{ 如果g.id==thisDiv{ g、 classList.removeinactivetab； g、 classList.addactivetab； }否则{ g、 classList.removeactivetab； g、 classList.addinactivetab； } } } .表格标签页提交{ 显示器：flex； 背景色：F5； 框大小：边框框； 盒影：0px 1px 3px 0000000 f； 边界半径：0px； 颜色：7070； 宽度：25%； 填充：9px 0px； 字体大小：16px； 边界：无； 证明内容：中心； 文本对齐：居中； 光标：指针； 字号：700； 柔性包装：包装； } .form-tabs-submit.activetab>span{ 显示器：flex； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .form-tabs-submit.inactivetab>span{ 显示：无； 背景：FFFFFF 0%0%无重复填充框； 盒影：0px 1px 3px 00000029； 边界半径：0px； 颜色：EC008C； 边框底部：3px实心EC008C； 宽度：25%； 填充：9px 0px； 字体大小：16px； } .表单选项卡提交：类型的第一个{ 边界半径：4px 0px 0px 0px } .表单选项卡提交：类型的最后一个{ 边界半径：0px 4px 0px 0px； } span{显示：块} 阿夫罗·博德 活动geldig t/m 31 oktober 瓦拉特罗斯米克罗 活动geldig t/m 12月31日 Avro Kro NCRV 1月31日起生效日期 瓦拉特罗斯米克罗 活动geldig t/m 31 maart
我会尝试以下解决方案： var-maxForms=4；
forvar i=0；我我会尝试使用这个解决方案： var-maxForms=4；
forvar i=0；iYou也可以从您的帖子中删除CSS。这与您的问题并不相关。好吧，我认为在代码段中看到它的变化会很有用，但会删除它：这会很有用-否则我们无法检查activetab类是否正常工作！是的，我才意识到。抱歉。@AlphaWolfGamer这不是它的工作原理……你也可以从你的帖子中删除CSS。这与您的问题并不相关。好吧，我认为在代码段中看到它的变化会很有用，但会删除它：这会很有用-否则我们无法检查activetab类是否正常工作！是的，我才意识到。抱歉。@AlphaWolfGamer这不是怎么回事……我也会做AddEventList
ner语句，并使用变量名来标识每个语句，但我将它们作为单独的指令保留下来-不过，我已将实际触发的函数更改为使用该语句，我刚刚添加了一条有关该语句的注释！我还将在循环中执行addEventListener语句，并使用变量名来标识每个语句，但我将它们作为单独的指令保留下来-不过，我已将触发的实际函数更改为使用该语句。我刚刚添加了一条有关该语句的注释！我觉得这是最干净最简单的方法，肯定会用到。谢谢@Sybrentjuh谢谢-很高兴听到你这么说。如果你需要其他帮助，请告诉我。我很乐意帮忙。快乐编码：我真的需要更多的帮助哈哈。我已经实现了这一点。但在上面的代码中，我遗漏了一些部分。这个div实际上是这样的：Avro Bode激活了geldig t/m 31 oktober，因此他们在选项卡中有一个副标题范围。当我点击字幕时，它会从当前字幕中删除activetab，但不会将其添加到目标字幕中。它只在我点击字幕以外的任何地方时才起作用。@Sybrentjuh没问题：在这种情况下使用它=>e.currentTarget.classList.add'activetab'-只需添加它，而不是e.target.classList.add'activetab'，这是有效的JSFIDLE:好的，然后我会使用它：我觉得这是最干净最简单的方法，一定要使用它。谢谢@Sybrentjuh谢谢-很高兴听到你这么说。如果你需要其他帮助，请告诉我。我很乐意帮忙。快乐编码：我真的需要更多的帮助哈哈。我已经实现了这一点。但在上面的代码中，我遗漏了一些部分。这个div实际上是这样的：Avro Bode激活了geldig t/m 31 oktober，因此他们在选项卡中有一个副标题范围。当我点击字幕时，它会从当前字幕中删除activetab，但不会将其添加到目标字幕中。它只在我单击字幕以外的任何位置时才起作用。@Sybrentjuh没问题：在这种情况下使用它=>e.currentTarget.classList.add'activetab'-只需添加它，而不是e.target.classList.add'activetab'，这是有效的JSFIDLE:好的，那么我将使用它：