Question

我需要一些关于如何处理布局背后的布局/基础设施的建议。

我现在看起来已经把页面放了，我不是在设计建议之后，而是在程序化建议之后。基本上，如果你看看我有8个灰色占位符的地方，他们最终会为各个业务部门填充资产。

对于这8个部分，他们将成为该公司的学科，如零售设计＆＃39;，＆＃39;总体规划＆＃39;等...我想在页面下方创建另一个部分，这样当他们点击某个特定的学科时，它总会将他们带到页面下方部分的同一部分。

但是我想要显示他们在同一个div中点击的部分。我希望这是有道理的。

我附上了一幅现在看起来如何的图片（它只是一个原型）。如果有人可以给我一些建议，我会非常感激。

Current Layout - Want to achieve the above!

Answer 1

但是我想要显示他们在同一个div中点击的部分。我希望这是有道理的。

我害怕我在那句话上失去了你。请澄清和/或发布之前的＆amp;在你想要实现的目标的形象之后。

我将假设“降低”你只是试图根据点击的上部区域替换下方部分的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>

关于布局/结构的建议

1 个答案: