html - CSS 怎么实现div根据左导航栏显示情况修改margin-left

问题描述

问 题

如图

左导航栏跟页面主内容不是一个层级的、无法根据左导航栏的属性值来选择页面主内容的div
还有什么黑科技可以用么？除了js

html结构

  <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav sidebar">
        ....
        </ul>
      </div>
    </div>
  </nav>
  <div class="page-content"></div>

顶端导航栏直接用的bootstrap的class

这是侧边栏的CSS定位代码

.sidebar {
  position: fixed;
  top: 52px;
  left: 0;
  width: 250px;
  font-size: 14px;
  height: 100vh;
  margin: 0;
  background-color: #333;
  ....
}

这是页面内容的CSS代码

.page-content {
  margin-left: 250px;
}

解决方案

为什么不用js？你这好比问吃饭不用嘴，有什么黑科技能帮我吃饭么？

点击左边的导航，用js去switch右边的container的className，这是再正统的路子不过了。注意js操作的度，尽量只用 js 去操作 DOM 节点的 className，样式仍然用 CSS 去定义。

做个前端页面而已，哪有那么多黑科技。

这篇关于html - CSS 怎么实现div根据左导航栏显示情况修改margin-left的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！