Question

我有3个锚标记按钮和6个div，我想为一个按钮分别分配2个div，当单击时，分配的div应该相应地显示/隐藏。

我可以使用下面的代码隐藏/显示第一个3格，但是对于接下来的3格（图像部分），我的代码无法正常工作

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";
}

单击分配的按钮时，是否可以显示/隐藏两个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

如果将引导程序添加到项目中，则显示和隐藏类将已经包含在项目中..并提供所需的功能。

我希望这会有所帮助。

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

您两次使用相同的ios。这是不允许的。我已更改您的HTML以更正此问题。我希望这会有所帮助。

id

Answer 4

由于document.getElementById()将为您提供第一个匹配元素，因此您将仅更改第一个匹配元素的样式，而不是第二个。

您可以考虑使用类来更改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')选择元素

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';
    }
}

我们可以使用相同的按钮来隐藏/显示多个div吗

4 个答案: