2016-05-12 81 views
-2

我需要一些關於如何在佈局背後實現佈局/基礎結構的建議。關於佈局/結構的建議

我已經把頁面,因爲它看起來現在,我不是在設計建議,但程序化的建議。基本上,如果你看看我擁有8個灰色佔位符的地方,他們最終將被填充資產用於各個業務部門。

對於這8個部分,他們將是該公司的學科,如'零售設計','總體規劃'等...我想在頁面上創建另一個部分,以便當他們點擊某個特定的規則時將始終將它們帶到頁面下方部分的相同部分。

但是我也想顯示他們在同一個div中點擊的部分。我希望這是有道理的。

我附上了它現在的樣子(它只是一個原型)的圖像。如果有人可以給我一些建議,我會很感激。

Current Layout - Want to achieve the above!

+1

這個問題是不是太廣,意見或根據需要討論,所以是題外話堆棧溢出。如果您有特定的,可回答的編程問題,請提供完整的詳細信息。 –

+0

道歉我並不真正知道該怎麼指定,因爲這是一個相當廣泛的問題,但我只想了解如何處理上述任務的一般性建議。如果需要的話,我也樂意提供更多信息。親切的問候。 – Troy

+0

不幸的是,「一般」建議並不是真正的目的。我們真的需要實際可行的編程問題。 –

回答

0

不過,我想得顯示,他們已經點擊了同一個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>