Question

我对编码非常陌生，并且已经从在线论坛和教程中学到了非常有限的知识。我似乎正面临着一个我无法解决的问题。

我的目标是按一下网格顶部的三个按钮（领导，计划，团队）之一（网格列出我们的服务），并使相应的网格框更改颜色。例如，按下“领导”按钮将使一个网格框变为蓝色，“程序”将使一个网格框变为黄色，而“团队”将其变为一个绿色框。这意味着，由于我们的服务重叠，因此网格框可能链接到多个按钮之一。因此，根据所按的按钮，单个网格框可能会变为蓝色，黄色或绿色。

我想出了如何执行切换按钮来显示主体onclick的方法。但是，这意味着很多冗余。（我必须对网格进行适当地着色，以用于领导力，另一个用于计划，另一个用于团队）。所以，我想我走错了路。

我已经搜索了切换器，按钮，锚点，事件监听器，目标，并为其命名。似乎所有内容都与按钮本身有关，而不是与按钮如何与页面上的元素有关。

我非常感谢能为我指出正确方向的任何人！谢谢！

np.flatnonzero(m)
# array([0, 1, 2, 3])

    function goToAnchor(anchor) {
      var loc = document.location.toString().split('#')[0];
      document.location = loc + '#' + anchor;
      return false;
    }
    var divs = ["Div1", "Div2", "Div3", "Div4"];
        var visibleDivId = null;
        function divVisibility(divId) {
          if(visibleDivId === divId) {
            visibleDivId = null;
          } else {
            visibleDivId = divId;
          }
          hideNonVisibleDivs();
        }
        function hideNonVisibleDivs() {
          var i, divId, div;
          for(i = 0; i < divs.length; i++) {
            divId = divs[i];
            div = document.getElementById(divId);
            if(visibleDivId === divId) {
              div.style.display = "block";
            } else {
              div.style.display = "none";
            }
          }
        }

    .square-grey {
     display: table-cell;
     height: 100px; 
     width: 600px;
     text-align: center;
     vertical-align: middle;
     border-radius: 5%;
    /*make it pretty*/
     background: #F5F5F5;
     color: #999999;
     padding: 10px 15px 10px 15px;
     font: 20px "helvetica"; 
     font-weight: 350;
     box-shadow: 2px 3px 3px #999999;
    }
    div.highlit {
      padding: 25px;
    }

Answer 1

已编辑答案，您可以将ID添加到框中并将其传递给功能。

const changeColor = (elements, color) => {
  elements.forEach(el => {
    const element = document.querySelector(el);
    element.style.backgroundColor = color;
  })
}

.colorbox {
  width: 100px;
  height: 100px;
  background-color: aquamarine;
  margin-bottom: 10px;
}

<div class="colorbox" id="colorbox1"></div>
<div class="colorbox" id="colorbox2"></div>
<div class="colorbox" id="colorbox3"></div>

<button onclick="changeColor(['#colorbox1', '#colorbox3'], 'tomato')">Change 1 & 3 to tomato</button>

<button onclick="changeColor(['#colorbox1', '#colorbox2'], 'aliceblue')">Change 1 & 2 to aliceblue</button>

<button onclick="changeColor(['#colorbox2', '#colorbox3'], '#ff0000')">Change 2 & 3 to reddest</button>

按下按钮并在页面其他位置更改框的颜色

1 个答案: