javascript - 覆盖未使用的 div

标签 javascript jquery html css templates

我正在设计响应式网站布局,其中某些页面的内容区域可能有右侧信息面板,而其他页面可能没有。我正在我的工作使用的自定义 CMS 中构建此站点。现在,我们使用 模板 创建所有 HTML 结构,并使用宏来提取客户端通过 CMS 输入的内容。

通常我会为使用右侧面板的页面创建一个单独的模板,为不使用右侧面板的页面创建一个单独的模板,但因为客户可能希望将右侧面板添加到没有它们的页面 future ,我想知道是否有一些覆盖样式可以添加到我的模板中,以便整个站点可以在一个模板上运行,而不必添加一个具有正确面板的模板页面和一个不适合另一个的模板。

我的代码应该是这样的:

CSS:

section#maincontent {width:720px; float:left;}
aside {width:240px; float:right;}

HTML:

<section id="maincontent">[conetent]</section>
<aside>[right_panel]</aside>

如果客户决定从页面/模板中添加/删除右侧面板,是否有一段 javascript/CSS/web 魔术可以覆盖右侧面板 div,以便主要内容填充页面的宽度而无需创建一个添加/删除样式的新模板?

最佳答案

您可以简单地将其更改为不显示。

HTML ...

<div id="theOneToBeRemoved" onclick="remove()">
</div>

Javascript

function remove(){
   document.getElementById("theOneToBeRemoved").style.display = "none";
}

我会注意到,尽管您可能不想将 onclick 事件添加到 div 中......也许添加一个按钮 X 或关闭......沿着这些线......所以如果他们点击 div 它不会意外关闭...另外,您可能想向您的 div 添加一些 css 转换...这样当它关闭时它会平滑而不是那么突然...看起来好多了

关于javascript - 覆盖未使用的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22650763/

相关文章:

html - 如何卡住 HTML 表格中的标题行?

javascript - 使用 vue js 在 laravel 中形成模式绑定(bind)

javascript - 为什么排序时数组中会出现重复元素?

javascript - 如果浏览器关闭,Google Chrome 推送通知无法正常工作?

javascript - JS,由于 (barbajs) Pjax,代码被执行了几次

html - CSS body 阴影

javascript - 如何关闭 jQuery 上下文菜单

javascript - 如何使固定标题在滚动时改变颜色

javascript - 上传前的图像预览不适用于 + image+_row

javascript - ng-repeat 渲染并自动滚动到底部