js选项卡 - 爱码网

HTML/CSS部分：

我的结构是这么写的：

每个选项的内容被嵌套在选项卡里。

ul li div。

ul是那个选项卡盒子，当然你还可以在上面弄个div什么的。

li当然是选项卡的选项咯。

div当然是每个选项显示出来的内容咯。根据语义化，这里的div视情况而定。比如选项内容是新闻列表时，这里可以就是li咯。

或者直接使用 dl dt dl 。

也可以使用不嵌套的方式。比如：

ul li 这是选项卡。

ul li 这是选项呀里面的内容。

使用样式把选项卡和内容黏合在一起去。

下面是每个选项内容嵌套在在相应选项卡下的HTML/CSS。

<!--
Author: XiaoWen
Create a file: 2016-12-07 09:04:12
Last modified: 2016-12-07 09:46:08
Start to work:
Finish the work:
Other information:
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>选项卡</title>
  <style>
    ul,li{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    ul{
      width: 300px;
      height: 150px;
      background: #ccc;
      overflow: hidden;
      position: relative;
    }
    ul li{
      width: 100px;
      height: 30px;
      line-height: 30px;
      float: left;
      text-align: center;
      background: #ddd;
    }
    ul div{
      position: absolute;
      width: 300px;
      left: 0;
      top: 30px;
      height: 120px;
      background: #eee;
      text-align: left;
    }
  </style>
</head>
<body>
<script>
//代码在下面...
</script>
</body>
</html>

HTML/CSS