Question

我在图片中看到三个div，每个显示一个：在特定的屏幕尺寸下显示块，另外两个div显示：一个都不显示，所以我要做的是根据需要删除每个div中的id如果此div具有css（display：none），因为具有相同的ID会使我的导航栏在更改屏幕尺寸时无法正常工作，那么它在第一个div上就可以正常工作，我曾尝试这样做，但是没有工作

<section class="mynavicon">
  <div class="icon">
    <i class="fas fa-bars fa-3x"></i>
  </div>
  <div class="navselect active">
    <ul>
      <li><a href="#" data-scroll="service">SERVICES</a>
        <li>
          <li><a href="#" data-scroll="my-art">MY ART</a>
            <li>
              <li><a href="#" data-scroll="about">ABOUT</a>
                <li>
                  <li><a href="#" data-scroll="contact-us">CONTACT US</a>
                    <li>
    </ul>
  </div>
</section>
<div class="container art clearfix" id="my-art">
  <div class="collection">
    <div class="bg1"><img src="img/17.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg2"><img src="img/19.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg3"><img src="img/20.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg4"><img src="img/15.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg5"><img src="img/21.jpg" style="width:100%;height: 100%;"></div>
  </div>
</div>

<div class="container art2" id="my-art">
  <div class="row collection2">
    <div class="b1 col-md-4 offset-sm-3 offset-lg-0 offset-md-0  mb-3 col-sm-12"><img src="img/38.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b2 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/31.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b3 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/37.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b4 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/33.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b5 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/34.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b6 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/36.jpg" style="max-width:100%;max-height: 100%;"></div>
  </div>
</div>

<div class="container art3" id="my-art">
  <div class="row">
    <div class="img1 col-10 offset-1">
      <div class="photo">
        <img src="img/28.jpg">
        <img src="img/25.jpg">
        <img src="img/26.jpg">
        <img src="img/27.jpg">
      </div>
      <div class="next arrow" id="arrow-rit"><i class="fas fa-angle-right fa-3x"></i></div>
      <div class="prev arrow" id="arrow-lft"><i class="fas fa-angle-left fa-3x"></i></div>
    </div>
  </div>
</div>

Answer 1

HTML中不能有多个具有相同id属性的元素。

只有第一个唯一的id计数，浏览器将忽略其余的。

这很重要-您无法在多个元素上使用相同的ID。

在页面中将ID用作锚点仅适用于第一个页面，因为下一个ID将被忽略。

首先将您拥有#my-art选择器的CSS移除或移动，因为您将使其成为所有先前id="my-art"部分的父代。您可能可以将样式移至.container（尽管名称无处不在）。 .art__container可能是更好的类名。

<section class="mynavicon">
  <div class="icon">
    <i class="fas fa-bars fa-3x"></i>
  </div>
  <div class="navselect active">
    <ul>
      <li><a href="#" data-scroll="service">SERVICES</a>
        <li>
          <li><a href="#" data-scroll="my-art">MY ART</a>
            <li>
              <li><a href="#" data-scroll="about">ABOUT</a>
                <li>
                  <li><a href="#" data-scroll="contact-us">CONTACT US</a>
                    <li>
    </ul>
  </div>
</section>

<section id="my-art">
  <div class="container art clearfix">
    <div class="collection">
      <div class="bg1"><img src="img/17.jpg" style="width:100%;height: 100%;"></div>
      <div class="bg2"><img src="img/19.jpg" style="width:100%;height: 100%;"></div>
      <div class="bg3"><img src="img/20.jpg" style="width:100%;height: 100%;"></div>
      <div class="bg4"><img src="img/15.jpg" style="width:100%;height: 100%;"></div>
      <div class="bg5"><img src="img/21.jpg" style="width:100%;height: 100%;"></div>
    </div>
  </div>

  <div class="container art2">
    <div class="row collection2">
      <div class="b1 col-md-4 offset-sm-3 offset-lg-0 offset-md-0  mb-3 col-sm-12"><img src="img/38.jpg" style="max-width:100%;max-height: 100%;"></div>
      <div class="b2 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/31.jpg" style="max-width:100%;max-height: 100%;"></div>
      <div class="b3 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/37.jpg" style="max-width:100%;max-height: 100%;"></div>
      <div class="b4 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/33.jpg" style="max-width:100%;max-height: 100%;"></div>
      <div class="b5 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/34.jpg" style="max-width:100%;max-height: 100%;"></div>
      <div class="b6 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/36.jpg" style="max-width:100%;max-height: 100%;"></div>
    </div>
  </div>

  <div class="container art3">
    <div class="row">
      <div class="img1 col-10 offset-1">
        <div class="photo">
          <img src="img/28.jpg">
          <img src="img/25.jpg">
          <img src="img/26.jpg">
          <img src="img/27.jpg">
        </div>
        <div class="next arrow" id="arrow-rit"><i class="fas fa-angle-right fa-3x"></i></div>
        <div class="prev arrow" id="arrow-lft"><i class="fas fa-angle-left fa-3x"></i></div>
      </div>
    </div>
  </div>
</section>

Answer 2

不要错过dotnetCarpenter在他的回答中所说的，并使用他建议的html结构。关于媒体查询，您可以像这样使用它

.art2 , .art3{
  display : none;
}


@media screen and (max-width : 780px){  /* width less than 780px */
  .art, .art3{
    display : none;
  }
  .art2{
    display : block;
  }

}

@media screen and (max-width : 500px){  /* width less than 500px */
  .art, .art2{
    display : none;
  }
  .art3{
    display : block;
  }

}

<section class="mynavicon">
  <div class="icon">
    <i class="fas fa-bars fa-3x"></i>
  </div>
  <div class="navselect active">
    <ul>
      <li><a href="#" data-scroll="service">SERVICES</a></li>
      <li><a href="#" data-scroll="my-art">MY ART</a></li>
      <li><a href="#" data-scroll="about">ABOUT</a></li>
      <li><a href="#" data-scroll="contact-us">CONTACT US</a></li>
    </ul>
  </div>
</section>
<div class="container art clearfix">
  <div class="collection">
    <div class="bg1"><img src="img/17.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg2"><img src="img/19.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg3"><img src="img/20.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg4"><img src="img/15.jpg" style="width:100%;height: 100%;"></div>
    <div class="bg5"><img src="img/21.jpg" style="width:100%;height: 100%;"></div>
  </div>
</div>

<div class="container art2">
  <div class="row collection2">
    <div class="b1 col-md-4 offset-sm-3 offset-lg-0 offset-md-0  mb-3 col-sm-12"><img src="img/38.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b2 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/31.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b3 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/37.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b4 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/33.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b5 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/34.jpg" style="max-width:100%;max-height: 100%;"></div>
    <div class="b6 offset-sm-3 col-md-4 mb-3 offset-lg-0 offset-md-0 col-sm-12"><img src="img/36.jpg" style="max-width:100%;max-height: 100%;"></div>
  </div>
</div>

<div class="container art3">
  <div class="row">
    <div class="img1 col-10 offset-1">
      <div class="photo">
        <img src="img/28.jpg">
        <img src="img/25.jpg">
        <img src="img/26.jpg">
        <img src="img/27.jpg">
      </div>
      <div class="next arrow" id="arrow-rit"><i class="fas fa-angle-right fa-3x"></i></div>
      <div class="prev arrow" id="arrow-lft"><i class="fas fa-angle-left fa-3x"></i></div>
    </div>
  </div>
</div>

注意：您可以将(max-width : 780px)和(max-width : 500px)更改为所需的任意宽度。.并且不要忘记关闭</li>

如何根据屏幕尺寸隐藏/显示HTML元素？

2 个答案: