通过单击来自其他 3 个 linkes(3 个其他 divs) 的 link 来替换最初隐藏的 div

Question

你好，我想用我点击其中一个时选择的另一个隐藏 div 替换已经显示的 div（最初是 3 个其他 divs（隐藏）） .这 4 个 link 与 4 个 div 相关，并且我可以在每次 link 单击时以同样的方式做到这一点。下面是代码：

                  <script type="text/javascript">
                    #4 Id of divs
                      var models = document.getElementById('models')
                      var geometry = document.getElementById('geometry')
                      var assembly = document.getElementById('assembly')
                      var loads = document.getElementById('loads')
                  #4 ID OF  links (related to each div)
                      var models1 = document.getElementById('models1')
                      var geometryy = document.getElementById('geometryy')
                      var assemblyy = document.getElementById('assemblyy')
                      var loads1 = document.getElementById('loads1')
                      geometryy.addEventListener("click", function () {
                        models.style.display = "none"
                        loads.style.display = "none"
                        assembly.style.display = "none"
                        geometry.style.display = "block"
                      })
                
                      assemblyy.addEventListener("click", function () {
                        geometry.style.display = "none"
                        models.style.display = "none"
                        loads.style.display = "none"
                        assembly.style.display = "block"
                      })
                      loads1.addEventListener("click", function () {
                        geometry.style.display = "none"
                        models.style.display = "none"
                        assembly.style.display = "none"
                        loads.style.display = "block"
                      })
                      models1.addEventListener("click", function () {
                        models.style.display = "block"
                        geometry.style.display = "none"
                        assembly.style.display = "none"
                        loads.style.display = "none"
                      })
                    </script>

CSS:

    <style>
      #loads { 
        display: none;
      }
      #geometry { 
        display: none;
      }
      #assembly { 
        display: none;
      }
      #models {
        display: block;
      }
</style>

关于 4 div 的一些 Html 代码：

                  <form  action="{% url 'results' %}" method="post"  id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
                  <div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
                      <div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
                        <div class="card-warning" style="background-color: #C0C0C0;">
                            <nav class="navbar">
                              <a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
                              <a href="#geometry" class="floated" style=" font-weight: bolder; " id="geometryy">Geometry</a>
                              <a href="#assembly" class="floated" style=" font-weight: bolder;" id="assemblyy">Assembly</a>
                              <a href="#loads" class="floated" style=" font-weight: bolder;" id="loads1">Loads</a>
                            </nav>
                        </div>
    .......... some fields related to the div id="models"
                          </div>
                        </div>
 ----------------About the second div
                <div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
                  <div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
                        <div class="card-warning" style="background-color: #C0C0C0;">
                         <nav class="navbar">
                          <a href="#models"  class="floated" style="font-weight: bolder;">Models</a>
                          <a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
                          <a href="#assembly" class="floated" style=" font-weight: bolder;" id="assembly2">Assembly</a>
                          <a href="#loads" class="floated" style=" font-weight: bolder;" id="loads2">Loads</a>
                         </nav>
                        </div>
                        <div style="display: flex;">
                          <div>
                            <img  style="height: 372px; width:270px; margin-left: 25px;">
                          </div>  
                          <div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
                          ------ some code for some fields
                          </div>
                      </div>
       ......    </div>
  ----      </div>
 ----------------About the third div
                 <div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
                  <div  style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
                    <div class="card-warning" style="background-color: #C0C0C0;">
                      <nav class="navbar">
                        <a href="#models"  class="floated" style="font-weight: bolder;">Models</a>
                        <a href="#geometry" class="floated" style=" font-weight: bolder;">Geometry</a>
                        <a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
                        <a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
                      </nav>
                    </div> 
                    <div style="display: flex;">
                              <div>
                                <img  style="height: 372px; width:270px; margin-left: 25px;">
                              </div>  
                              <div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
                              ------ some code for some fields
                              </div>
                    </div>
 ......         </div>
    ----     </div>
 ----------------About the fourth div
          <div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
               <div  style="background-color: white; font-size:89%; width: 62rem; height: 32rem;  margin-left:2.5rem;">
                  <div class="card-warning" style="background-color: #C0C0C0;">
                    <nav class="navbar">
                      <a href="#models"  class="floated" style="font-weight: bolder;" >Models</a>
                      <a href="#geometry" class="floated" style=" font-weight: bolder;">Geometry</a>
                      <a href="#assembly" class="floated" style=" font-weight: bolder;" id="assemblyyy">Assembly</a>
                      <a  style=" font-weight: bolder; border-style: solid;">Loads</a>
                    </nav>
                    </div> 
                    <div style="display: flex;">
                              <div>
                                <img  style="height: 372px; width:270px; margin-left: 25px;">
                              </div>  
                              <div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
                              ------ some code for some fields
                              </div>
                    </div>
 ......         </div>
    ----     </div>
             </form>

我想要的：首先显示“模型”div，另外 3 个 divs(“geometry”,assembly”,”loads”) 是hidden ，所以我想当我点击“geometry” div 时，第一个 div “models” 被隐藏，其他 divs （“assembly” 和 “loads” 仍然隐藏）依此类推，如果单击程序集...我想在每个 div 上应用它（因为 evry div 有 4 links）但是它没有给我任何结果！

Answer 1

<html>
    <head>
        <style>
             #div2, #div3, #div4{ 
        display: none;
      }

        </style>
    </head>
    <body>
        <div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
    <a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
       <a  href="#geometry" class="geo pk">Geometry</a>
            <a href="#assembly" class="geo fk">Assembly</a>
                <a href="#loads"  class="geo gk">Loads</a>
</div>
<div id="div1" class="wy hid">   
Models and other stuffs here 


</div>
<div id="div2" class="pk hid">   
Geometry and other stuffs here 


</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here 
</div>
</div>  

<script>
window.onload = btn() ;
function btn() {
    

var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
    query[i].addEventListener("click", function() { //know which href is being clicked currently 
        
       var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively. 

        var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href 
        for(var j=0;j<pts.length;j++){
            
            pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
        }
        this.style.border= "solid"; //Add currently clicked href border
        point.style.display = "block"; //display currently clicked div 
        
           
        
        

    })
}

} 
</script>

    </body>
</html>

抱歉，id 和类名称是随机给出的，我不擅长命名。有不明白的请尽管提问

通过单击来自其他 3 个 linkes(3 个其他 divs) 的 link 来替换最初隐藏的 div

replace a div hidden intially by a click on a link from 3 other 3 linkes(3 other divs)

html

javascript

css

django-templates