我们可以使用相同的按钮来 hide/show 多个 div

Question

我有 3 个锚标记按钮和 6 个 div，我想为每个按钮分配 2 个 div，单击时分配的两个 div 应该相应地得到 displayed/hidden。

我能够使用下面的代码 hide/show 第一个 3 个 div 但是对于接下来的 3 个 div（图像部分）我的代码不起作用

html:

//button section
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>

js:

function show(elementId) { 
    document.getElementById("id1").style.display="none";
    document.getElementById("id2").style.display="none";
    document.getElementById("id3").style.display="none";
    document.getElementById(elementId).style.display="block";
}

点击指定按钮时，有什么替代方法 show/hide 两个 div 吗？

Answer 1

您应该考虑将 jQuery 包含到您的项目中。 jQuery 已经提供此功能。

在您的 html 标签中添加此代码：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

然后您将能够在这种情况下使用以下功能 - 切换功能，您可以在其中切换指定元素的类：

$( "#id1, #id2, #id3" ).toggle(
  function() {
    $( this ).addClass( "show" );
  }, function() {
    $( this ).removeClass( "hide" );
  }
);

请参阅 jquery 文档以了解切换和单击事件：

https://api.jquery.com/toggle-event/

https://api.jquery.com/click/

和一般的 jQuery 文档以查找其他类似功能：

https://api.jquery.com

如果您将 bootstrap 添加到您的项目中，显示和隐藏类将已经包含在您的项目中..并提供您想要的功能。

希望对您有所帮助。

Answer 2

您可以使用 .querySelectorAll 方法隐藏所有这些元素

function show(elementId) { 
    [].slice.call(document.querySelectorAll(".myBlock"),0).map(e=>e.style.display="none")
    document.getElementById(elementId).style.display="block";
}

//button section
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me1" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me2" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me3" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2 myBlock" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2 myBlock" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2 myBlock" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>

Answer 3

您正在使用同一个 id 两次。这是不允许的。我已更改您的 HTML 以更正此问题。希望对您有所帮助。

function show(elementId) { 
   let divs = Array.from(document.querySelectorAll("[id ^= 'did']"));
   let imgs = Array.from(document.querySelectorAll("[id ^= 'iid']"));
   divs.forEach(d=>{d.style.display="none"})
   imgs.forEach(i=>{i.style.display="none"})
   document.getElementById("d"+elementId).style.display="block";
   document.getElementById("i"+elementId).style.display="block";
    }

<div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget1</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget2</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget3</a></div>
   </div>
<!--1st 3 divs-->
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="did1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

<!--next 3 divs(image section)-->
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="iid1"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"/></div>
      <div class="mx-2" id="iid2" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"/></div>
      <div class="mx-2" id="iid3" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat"/></div>
   </div>
</div>

Answer 4

因为 document.getElementById() 会给你第一个匹配的元素，所以你将只改变第一个匹配元素的样式，而不是第二个。

您可以考虑使用 class 更改 id 属性，因为 id 属性是唯一的。

// remove the id attribute if it's not used in other places
// class-replacement-for-id1 here is just a placeholder, it can be anything you want
<div class="mx-2 class-replacement-for-id1" id="id1">

<div class="mx-2 class-replacement-for-id1" id="id1">
    <img class="img-fluid" src="assets/images/shadow-img.png"/>
</div>

然后使用document.querySelectorAll('.class-replacement-for-id1')到select元素

function toggleDisplay(className) { 
    var elements = document.querySelectorAll('.' + className);

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = elements[i].style.display === 'none' ? 'block' : 'none';
    }
}

我们可以使用相同的按钮来 hide/show 多个 div

Can we use same button to hide/show multiple divs

javascript

css

function

display