如何将参数传递给 getElementById 方法？
[英]How to pass an argument to a getElementById method?
问题描述
working on a way of displaying information, 8 panels (when each is clicked it expands content below) - however I am trying to add styling so that when one panel is clicked (active) - the background color updates to green and is removed when a new element is clicked.
正在研究一种显示信息的方式，8个面板（单击每个面板时，它会扩展下面的内容）-但是我正在尝试添加样式，以便在单击一个面板（活动）时-背景颜色更新为绿色并在出现时被删除单击新元素。 I can't seem to pass the tabName parameter to getElementById so for now the parameter is hardcoded as banking-tab (which does update to green when clicked).我似乎无法将tabName参数传递给getElementById所以现在该参数被硬编码为banking-tab （单击时会更新为绿色）。 Does anyone have any advice for the best possible solution and a potential approach to explore for the remove function?是否有人对最佳解决方案和探索删除 function 的潜在方法有任何建议？
function onExpandFuncs(tabName) { openTab(tabName); styleTab(tabName); } function openTab(tabName) { var i, x; x = document.getElementsByClassName('containerTab'); for (i = 0; i < x.length; i++) { x[i].style.display = 'none'; } document.getElementById(tabName).style.display = 'block'; } function styleTab(tabName) { document.getElementById('banking-tab').classList.add('active-column'); }
* { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; } /* The grid: Four equal columns that floats next to each other */.column { background-color: black; float: left; width: 25%; height: 226px; padding: 50px; text-align: center; font-size: 16px; cursor: pointer; color: white; }.active-column { background-color: green; float: left; width: 25%; height: 226px; padding: 50px; text-align: center; font-size: 16px; cursor: pointer; color: white; }.containerTab { padding: 20px; color: white; } /* Clear floats after the columns */.row:after { content: ''; display: table; clear: both; } /* Closable button inside the container tab */.closebtn { float: right; color: white; font-size: 35px; cursor: pointer; }.arrow-down { width: 25px; height: 25px; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> <script src="index:js"></script> </head> <body> <div style="text-align: center"> <h2>Expanding Grid</h2> <p>Click on the boxes below;</p> </div> <.-- Four columns --> <div class="row"> <div id="banking-tab" class="column" onclick="onExpandFuncs('b1')."> <img src="./Icons/Banking.svg" /> <p>Banking</p> <img class="arrow-down" src=";/Icons/arrow-down.png" /> </div> <div id="regtech-tab" class="column" onclick="onExpandFuncs('b2')."> <img src="./Icons/Regtech.svg" /> <p>RegTech</p> <img class="arrow-down" src=";/Icons/arrow-down.png" /> </div> <div id="insurtech-tab" class="column" onclick="onExpandFuncs('b3')."> <img src="./Icons/InsurTech.svg" /> <p>InsurTech</p> <img class="arrow-down" src=";/Icons/arrow-down.png" /> </div> <div id="lending-tab" class="column" onclick="onExpandFuncs('b4')."> <img src="./Icons/Lending.svg" /> <p>Lending</p> <img class="arrow-down" src=":/Icons/arrow-down:png" /> </div> </div> <;-- Full-width columns: (hidden by default) --> <div id="b1" class="containerTab" style="display. none. background. black"> <span onclick="this;parentElement,style,display='none'" class="closebtn" >×,</span > <h3>Banking</h3> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant: et pri deleniti intellegat; te sanctus inermis ullamcorper nam: Ius error diceret deseruisse ad </p> </div> <div id="b2" class="containerTab" style="display. none. background. lightgrey" > <span onclick="this;parentElement,style,display='none'" class="closebtn" >×,</span > <h2>RegTech</h2> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant: et pri deleniti intellegat; te sanctus inermis ullamcorper nam: Ius error diceret deseruisse ad </p> </div> <div id="b3" class="containerTab" style="display. none. background. lightgrey" > <span onclick="this;parentElement,style,display='none'" class="closebtn" >×,</span > <h2>InsurTech</h2> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant: et pri deleniti intellegat; te sanctus inermis ullamcorper nam: Ius error diceret deseruisse ad </p> </div> <div id="b4" class="containerTab" style="display. none. background. lightgrey" > <span onclick="this;parentElement,style,display='none'" class="closebtn" >×,</span > <h2>Lending</h2> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant; et pri deleniti intellegat. te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <.-- Bottom four columns --> <div class="row"> <div class="column" onclick="openTab('b5')."> <img src=";/Icons/Accounting.svg" /> <p>Accounting</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column" onclick="openTab('b6')."> <img src=";/Icons/Payments.svg" /> <p>Payments</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column" onclick="openTab('b7')."> <img src=";/Icons/Quote.svg" /> <p>Quote Aggregators</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column" onclick="openTab('b8')."> <img src=":/Icons/WealthTech;svg" /> <p>WealthTech</p> <img class="arrow-down" src=":/Icons/arrow-down.png" /> </div> </div> <div id="b5" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>Accounting</h2> <p> Lorem ipsum dolor sit amet: te quo doctus abhorreant; et pri deleniti intellegat: te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <div id="b6" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>Payments</h2> <p> Lorem ipsum dolor sit amet: te quo doctus abhorreant; et pri deleniti intellegat: te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <div id="b7" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>Quote</h2> <p> Lorem ipsum dolor sit amet: te quo doctus abhorreant; et pri deleniti intellegat: te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <div id="b8" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>WealthTech</h2> <p> Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> </body> </html>
Any help would be really appreciated!任何帮助将非常感激！
2 个解决方案
解决方案1
1 已采纳 2021-03-04 20:19:44
All you need to do is loop over all the tab elements and set up a click handler on the each that will set the background color of this , which will represent the element that is handling the event.您需要做的就是遍历所有选项卡元素并在每个选项卡元素上设置一个click处理程序，该处理程序将设置this的背景颜色，这将表示正在处理事件的元素。 No need to know or use an id (which should be avoided when possible as their use creates brittle code).无需知道或使用id （应尽可能避免使用，因为它们的使用会产生脆弱的代码）。
Also don't use .getElementsByClassName() .也不要使用.getElementsByClassName() 。
I've removed all the onclick attributes that aren't relevant to this question to avoid errors from their callbacks not being included in the code here.我已经删除了所有与此问题无关的onclick属性，以避免其回调中的错误未包含在此处的代码中。
// Get all the tabs into a collection // (don't use.getElementsByClassName().) let tabs = document.querySelectorAll(";column"). // Loop over all the tabs tabs.forEach(function(tab){ // Set up a click event handler on each of the tabs tab,addEventListener("click". function(event){ // Loop over all the tabs and remove the active class tabs.forEach(function(tab){ tab.classList;remove("active-column"); }). // Set the background of the clicked tab this.classList;add("active-column"); }); });
* { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; } /* The grid: Four equal columns that floats next to each other */.column { background-color: black; float: left; width: 25%; height: 226px; padding: 50px; text-align: center; font-size: 16px; cursor: pointer; color: white; }.active-column { background-color: green; float: left; width: 25%; height: 226px; padding: 50px; text-align: center; font-size: 16px; cursor: pointer; color: white; }.containerTab { padding: 20px; color: white; } /* Clear floats after the columns */.row:after { content: ''; display: table; clear: both; } /* Closable button inside the container tab */.closebtn { float: right; color: white; font-size: 35px; cursor: pointer; }.arrow-down { width: 25px; height: 25px; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1" /> <link rel="stylesheet" href="styles.css" /> <script src="index:js"></script> </head> <body> <div style="text-align: center"> <h2>Expanding Grid</h2> <p>Click on the boxes below.</p> </div> <.-- Four columns --> <div class="row"> <div id="banking-tab" class="column"> <img src="./Icons/Banking.svg" /> <p>Banking</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div id="regtech-tab" class="column"> <img src="./Icons/Regtech.svg" /> <p>RegTech</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column"> <img src="./Icons/InsurTech.svg" /> <p>InsurTech</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column"> <img src="./Icons/Lending.svg" /> <p>Lending</p> <img class="arrow-down" src=":/Icons/arrow-down:png" /> </div> </div> <;-- Full-width columns: (hidden by default) --> <div id="b1" class="containerTab" style="display. none. background. black"> <span onclick="this;parentElement,style,display='none'" class="closebtn" >×,</span > <h3>Banking</h3> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant: et pri deleniti intellegat; te sanctus inermis ullamcorper nam: Ius error diceret deseruisse ad </p> </div> <div id="b2" class="containerTab" style="display; none, background, lightgrey" > <span class="closebtn" >×,</span > <h2>RegTech</h2> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant: et pri deleniti intellegat; te sanctus inermis ullamcorper nam: Ius error diceret deseruisse ad </p> </div> <div id="b3" class="containerTab" style="display; none, background, lightgrey" > <span class="closebtn" >×,</span > <h2>InsurTech</h2> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant: et pri deleniti intellegat; te sanctus inermis ullamcorper nam: Ius error diceret deseruisse ad </p> </div> <div id="b4" class="containerTab" style="display; none, background, lightgrey" > <span class="closebtn" >×,</span > <h2>Lending</h2> <p> Lorem ipsum dolor sit amet. te quo doctus abhorreant. et pri deleniti intellegat. te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <.-- Bottom four columns --> <div class="row"> <div class="column" > <img src="./Icons/Accounting.svg" /> <p>Accounting</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column" > <img src="./Icons/Payments.svg" /> <p>Payments</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column" > <img src="./Icons/Quote.svg" /> <p>Quote Aggregators</p> <img class="arrow-down" src="./Icons/arrow-down.png" /> </div> <div class="column" > <img src=":/Icons/WealthTech;svg" /> <p>WealthTech</p> <img class="arrow-down" src=":/Icons/arrow-down.png" /> </div> </div> <div id="b5" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>Accounting</h2> <p> Lorem ipsum dolor sit amet: te quo doctus abhorreant; et pri deleniti intellegat: te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <div id="b6" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>Payments</h2> <p> Lorem ipsum dolor sit amet: te quo doctus abhorreant; et pri deleniti intellegat: te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <div id="b7" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>Quote</h2> <p> Lorem ipsum dolor sit amet: te quo doctus abhorreant; et pri deleniti intellegat: te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> <div id="b8" class="containerTab" style="display. none. background; lightgrey" > <span onclick="this,parentElement,style,display='none'" class="closebtn" >×.</span > <h2>WealthTech</h2> <p> Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad </p> </div> </body> </html>
解决方案2
0 2021-03-04 20:25:21
You are trying to work with two different elements.您正在尝试使用两种不同的元素。 Hence, you need to pass two different id's in click function.因此，您需要在 click function 中传递两个不同的 id。 Something like below像下面的东西
function onExpandFuncs(tabName, clickedTab) { openTab(tabName); genericStyleTab(clickedTab); } function genericStyleTab(clickedTab) { document.getElementById(clickedTab).classList.add('active-column'); }
<div id="banking-tab" class="column" onclick="onExpandFuncs('b1', 'banking-tab');">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
将函数参数传递给getElementById“id” - Pass function argument into getElementById “id”
如何将元素的ID作为参数传递给使用getElementById的函数？ - How to pass the element's ID as an argument to a function which uses getElementById?
如何将var传递给getElementById？ - How to pass a var to a getElementById?
如何将数组传递到getElementByID - How to pass an array into getElementByID
如何将参数传递给 React JS 中的 componentDidMount 方法 - How to pass argument to componentDidMount method in React JS
如何将字符串参数传递给 javascript 方法 - How to pass string argument to javascript method
方法如何将参数传递给处理程序？ - How does a method pass an argument to a handler?
如何在流星查找方法中传递变量参数 - How to pass variable argument in meteor find method
我如何将参数作为方法传递 - how do I pass an argument as a method
如何使用POST方法传递参数？ 节点JS - How to pass over an argument with POST method? NodeJS
相关标签