レイアウト/構造に関するアドバイス

Question

レイアウトの背後にあるレイアウト/インフラストラクチャへのアプローチ方法についてアドバイスが必要です。

私は今見ているようにページを置いていますが、私はデザインアドバイスの後ではなく、プログラマチックアドバイスです。基本的に、私がどこに8つの灰色のプレースホルダを持っているかを見ると、最終的にはビジネスのさまざまなセクションの資産で満たされます。

「Retail Design」、「Masterplanning」などのような8つのセクションについては、それらの分野になります...私はページ下部に別のセクションを作成して、特定の分野をクリックするとページの下にあるセクションの同じセクションに移動します。

しかし、同じdivでクリックしたセクションも表示したいです。私はこれが理にかなってほしい。

私は今見た目のイメージを添付しています（単なるプロトタイプです）。誰かが私にこれについていくつかのアドバイスを与えることができたら、私は本当にそれを感謝します。

Answer 1

Current Layout - Want to achieve the above!は、しかし、私は、彼らが同じdiv要素にクリックしたセクションを表示あまりにも欲しいです。私はこれが理にかなってほしい。

私はその文章であなたを失いました。あなたが達成しようとしているもののイメージの後に、&の前に明確にしてください。

---

私はあなただけクリックされた上部に基づいて、その下に下部分のHTMLを交換しようとしている「ダウン低」と仮定するつもりです。

var links = document.querySelectorAll('a[data-which]') 
 
var divs = document.querySelectorAll('div.showhide') 
 

 
for(var i = 0; i < links.length; i++) 
 
    links[i].onclick = function() { 
 
     for(var i = 0; i < divs.length; i++) { 
 
      if(divs[i].id == this.getAttribute('data-which')) { 
 
       divs[i].style.display = 'block' 
 
       divs[i].scrollIntoView({behavior: "smooth"}) // only Firefox supports smooth scroll, others use instant scroll 
 
      } else 
 
       divs[i].style.display = 'none' 
 
     } 
 
    }

div.showhide { display: none;/*until js shows one*/ }

<a href="javascript:" data-which="one">link 1</a> <a href="javascript:" data-which="two"> <a href="javascript:">link 2</a> <a href="javascript:" data-which="three">link 3</a> 
 

 
<br/><br/><br/><br/><br/><br/><br/><br/> 
 

 
lower 
 

 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
 
down 
 
<br/><br/><br/><br/><br/><br/><br/><br/> 
 
section to scroll to here: 
 

 
<br/><br/> 
 
<div id="one" class="showhide">content of 1</div> 
 
<div id="two" class="showhide">content of 2</div> 
 
<div id="three" class="showhide">content of 3</div>