0

我正在制作一个项目，在页面每一侧的框架集中有两个框架。左边的框架称为“左”，右边的框架称为“右”。我正在尝试为左框架分配一个“隐藏/显示”按钮；该按钮将分配在左框架上，它将隐藏左框架，从而使右框架更宽。我尝试搜索，但没有解决方案。

我是这个网页设计的新手，所以，如果有人向我伸出援助之手，那将是一种荣幸。我希望我没有让事情变得太复杂。

谢谢，期待您的热心回复…………

4

1 回答 1

1

正如其他人提到的那样，框架可能会给您带来麻烦。最简单的方法可能是将两列包装在 div 中。标签上的一个类<body>决定了两者的宽度和可见性。“隐藏”和“显示”最左侧列的过程只是使用javascript切换body标签上的哪个类。

这是一个简单的例子。

<body class="two-col">
  <div class="sidebar">
    <a id="hide-sidebar">Hide</a>
    Left
  </div>
  <div class="main">
    Right
  </div>
</body>

body.two-col .sidebar {
  width: 25%;
  position: absolute;
  top: 0;
  left: 0;
}

body.two-col .main {
  width: 75%;
  margin-left: 25%;
}

body.one-col .sidebar {
  display: none;
}

$('#hide-sidebar').click(function() {
  body = $('body');
  if (body.hasClass('one-col')) {
    body.addClass('two-col').removeClass('one-col');
  } else {
    body.addClass('one-col').removeClass('two-col');
  }
});
于 2013-01-09T22:01:00.803 回答