他们在同一页面上显示不同的面板。首先，在你的CSS底部添加下列规则，从无序列表中移除默认的padding-left和margin-top值：
.info-box ul {
padding-left: 0;
margin-top: 0;
}
注意： 我们正在使用后代选择器，整个例子 .info-box 都位于链的开始——这样页面已经带有其他内容时，我们可以插入这个特征，不害怕与应用于页面其他部分的样式冲突。
接下来，我们将样式化水平选项卡——列表项都要左浮动确保他们一行合起来，他们的list-style-type被设置为 none 用以去除项目符号，宽度（width）设置为 150px 以便于适应这个info-box。链接（ <a>）元素设置为display inline-block，这样他们将在一行显示，仍然保持样式可设置，他们会被样式化合适的选项卡按钮，通过一系列的其他属性。
添加下列的CSS：
.info-box li {
float: left;
list-style-type: none;
width: 150px;
}
.info-box li a {
display: inline-block;
text-decoration: none;
width: 100%;
line-height: 3;
background-color: red;
color: black;
text-align: center;
}
最后，对于本节，我们将会在链接状态上设置一些样式。首先，我们要设置标签的 :focus 和 :hover 状态，让他们在获得焦点/鼠标悬浮的时候看起来不同，给用户提供一些可视化反馈。其次，当某个选项卡的类（ class ）出现 active 时，我们为其设置一条相同的样式规则。我们将通过使用java script来设置，当一个标签被点击时。把这些CSS放置在你的其他样式后面：
.info-box li a:focus, .info-box li a:hover {
background-color: #a60000;
color: white;
}
.info-box li a.active {
background-color: #a60000;
color: white;
}
样式化面板
下一步工作是样式化我们的面板，现在开始吧！
首先，添加下列的规则去样式化 .panels <div> 容器。我们简单的设置一个固定的高度，确保面板包含在info-box里面，position relative 设置 <div>为定位上下文，这样你能然后相对自身放置定位子元素，而不是相对<html>元素，最后我们清除（clear）浮动，设置在上面CSS中，这样避免影响布局的剩余部分。
.info-box .panels {
height: 352px;
position: relative;
clear: both;
}
在本节的最后，我们将对包含我们面板的单独 <article>元素设置样式。我们添加的第一条规则就是绝对定位面板，让他们都位于<div>容器的左上角——这一部分对整个布局特性是关键的，就像使面板互相位于顶部。规则设置面板为和容器同样的高度，给内容一些内边距，设置字体颜色（color），和背景颜色（background-color）。
我们将添加的第二条规则，对带有类（ class ）为（ active-panel ）的面板，设置z-index为 1，会让他位于其他的面板之上（默认定位元素 z-index 的值是 0，会使默认元素位于下面）。同样的，我们会在合适的时候用java script 来添加这个类。
.info-box article {
position: absolute;
top: 0;
left: 0;
height: 352px;
padding: 10px;
color: white;
background-color: #a60000;
}
.info-box .active-panel {
z-index: 1;
}
添加我们的java script
让这些特性工作的最后一步是添加一些java script。添加下列一块代码，准确的写在你的开始和结束的<script>标签之间（在接下来的HTML内容中你将会发现这些）：
var tabs = document.querySelectorAll('.info-box li a');
var panels = document.querySelectorAll('.info-box article');
for(i = 0; i < tabs.length; i++) {
var tab = tabs[i];
setTabHandler(tab, i);
}
function setTabHandler(tab, tabPos) {
tab.onclick = function() {
for(i = 0; i < tabs.length; i++) {
if(tabs[i].getAttribute('class')) {
tabs[i].removeAttribute('class');
}
}
tab.setAttribute('class', 'active');
for(i = 0; i < panels.length; i++) {
if(panels[i].getAttribute('class')) {
panels[i].removeAttribute('class');
}
}
panels[tabPos].setAttribute('class', 'active-panel');
}
}
这些代码做了如下工作：
首先我们保存所有的选项卡和所有的面板引用到两个变量中，名为 tabs 和 panels，这样此后我们可以容易地为它们做事。
然后我们使用 for 循环遍历所有的选项卡，并且在每一个上运行叫做setTabHandler() 的函数，此函数建立当每个选项卡被点击时应该发生的功能。 运行时， 函数会被传递选项卡，和一个索引数i 指明选项卡在tabs 数组中的位置。
在setTabHandler()函数中，这个标签创建了一个onclick事件来处理点击，所以当标签被点击的时候，接下来会发生：
效果如下：
一个固定位置的列表消息盒子
在我们的第二个例子中，我们将会采用我们的第一个例子——我们的消息盒子——把她加到一个满的网页之中去。但是不仅仅是这样——我们将固定她的位置，以便于他能待在浏览器窗口的同一个位置。当主要内容滚动时，这个消息盒子将会待在屏幕的同一个位置。我们完工以后的例子长下面这样：
注：你可以点击蓝字 fixed-info-box.html (source code)预览完成后的效果，看看哪些部分是你在这篇文章