Question

我想根据下拉列表中选择的内容更改网格框的背景颜色，但我感到茫然。如果选择A / 3，则框1-3将改变。如果选择了C / 10，则框1-10将改变。这是我的第一个网络开发项目，所以我可能会接近这个错误。如果是的话，请告诉我。谢谢你的帮助！

＆＃13;

.menu
            {
             overflow: hidden;
             background-color: #29648A;
             margin:0 auto;
             }
          .dropdown
            {
             float: left;
             overflow: hidden;
             width: 25%;
             }
          .button
            {
             font-size: 16px;
             border: none;
             outline: none;
             color: white;
             padding: 10px 10px;
             background-color: inherit;
             width: 100%;
             text-align: center;
             }
          .dropdown:hover
            {
             background-color: #2E9CCA;
             }
          .list
            {
             display: none;
             position: absolute;
             background-color: #F9F9F9;
             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
             width: 24.65%;
             }
          .list a
            {
             float: none;
             color: black;
             padding: 12px 16px;
             text-decoration: none;
             display: block;
             text-align: center;
             }
          .list a:hover
            {
             background-color: #ddd;
             }
          .dropdown:hover .list
            {
             display: block;
             }
          .wrapper
            {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             grid-template-rows: repeat(4, 100px);
             grid-gap: 10px;
             max-width: 400px;
             margin: 50px auto;
             }
          .box
            {
             background-color: #AAABB8;
             color: white;
             text-align: left;
             font-size: 20px;
             padding: 10px 10px;
             border-radius: 5px;
             max-width: 100px;
             }

＆＃13;

<!DOCTYPE html>
    <html>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    
      <head>
      </head>
    
      <body>
        <div class="menu">
          <div class="dropdown">
            <button class="button">A</button>
            <div class="list">
              <a href="#">1</a>
              <a href="#">2</a>
              <a href="#">3</a>
              <a href="#">4</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="button">B</button>
            <div class="list">
              <a href="#">5</a>
              <a href="#">6</a>
              <a href="#">7</a>
              <a href="#">8</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="button">C</button>
            <div class="list">
              <a href="#">9</a>
              <a href="#">10</a>
              <a href="#">11</a>
              <a href="#">12</a>
            </div>
          </div>
          <div class="dropdown">
            <button class="button">D</button>
            <div class="list">
              <a href="#">13</a>
              <a href="#">14</a>
              <a href="#">15</a>
              <a href="#">16</a>
            </div>
          </div>
        </div>
        <section>
          <div class="wrapper">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
            <div class="box">11</div>
            <div class="box">12</div>
            <div class="box">13</div>
            <div class="box">14</div>
            <div class="box">15</div>
            <div class="box">16</div>
          </div>
        </section>
      </body>
    </html>

＆＃13;

Answer 1

您可以使用addClass()＆amp; removeClass()使用jquery 为每个框添加一些具有不同id的if语句，并将其用作选择器将每列连接到自己的框！尝试一下，如果需要，我可以提供帮助。

CSS改变网格框的可变范围

1 个答案: