布局/结构建议

Advice on Layout/Structure

本文关键字：构建 结构 布局      更新时间：2023-09-26

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

我把页面放在现在的样子，我追求的不是设计建议，而是程序建议。基本上，如果你看看我有8个灰色占位符的地方，它们最终会被企业各个部门的资产填满。

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

然而，我也想显示他们在同一个分区中点击的部分。我希望这是有意义的。

我附上了一张它现在的样子的图片（它只是一个原型）。如果有人能就此给我一些建议，我将不胜感激

当前布局-想要实现以上目标！

然而，我也想显示他们在同一个分区中点击的部分。我希望这是有意义的。

恐怕我听不懂你说的那句话。请在&想象一下你想要达到的目标。

我假设"向下"，您只是试图根据单击的上一部分替换下一部分的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>

相关文章：