在浏览器中显示一个选项卡界面，头部为1、2、3、4、5。点击头部任意一个数字，都在下方显示出不同的信息，并且鼠标停留在任意一个数字上时，数字的颜色改变。案例如下图所示
默认的是数字1中的内容
点击数字二
点击其他数字依此类推，在这里就不一一展示了
HTML代码
全部HTML代码展示
<div> <!-- 头部 --> <div> <ul> <li> <a href="#" >1</a> </li> <li> <a href="#" >2</a> </li> <li> <a href="#" >3</a> </li> <li> <a href="#" >4</a> </li> <li> <a href="#" >5</a> </li> </ul> </div> <!-- 内容 --> <div> <div> <ul> <li> <a href="#" >我是第一个选项卡的内容1</a></li> <li> <a href="#" >我是第一个选项卡的内容2</a></li> <li> <a href="#" >我是第一个选项卡的内容3</a></li> <li> <a href="#" >我是第一个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第二个选项卡的内容1</a></li> <li> <a href="#" >我是第二个选项卡的内容2</a></li> <li> <a href="#" >我是第二个选项卡的内容3</a></li> <li> <a href="#" >我是第二个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第三个选项卡的内容1</a></li> <li> <a href="#" >我是第三个选项卡的内容2</a></li> <li> <a href="#" >我是第三个选项卡的内容3</a></li> <li> <a href="#" >我是第三个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第四个选项卡的内容1</a></li> <li> <a href="#" >我是第四个选项卡的内容2</a></li> <li> <a href="#" >我是第四个选项卡的内容3</a></li> <li> <a href="#" >我是第四个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第五个选项卡的内容1</a></li> <li> <a href="#" >我是第五个选项卡的内容2</a></li> <li> <a href="#" >我是第五个选项卡的内容3</a></li> <li> <a href="#" >我是第五个选项卡的内容4</a></li> </ul> </div> </div> </div> </body>
HTML代码分解 ----头部
头部由一个包含了5个 li 标签的列表构成，每个 li 标签中都包含一个 a 标签
这里的selected选择器的作用是 改变选中的li的背景颜色
<div> <ul> <li> <a href="#" >1</a> </li> <li> <a href="#" >2</a> </li> <li> <a href="#" >3</a> </li> <li> <a href="#" >4</a> </li> <li> <a href="#" >5</a> </li> </ul> </div>
HTML代码分解 ----内容
在这里每一个含有dom选择器的div依次代表的是每一个选项卡的内容
.dom选择器中设置display:none;，使每一个选项卡内容隐藏
而对展现的内容另外加一个style=“display: block”; 的属性,使其展现在浏览器上
<div> <div> <ul> <li> <a href="#" >我是第一个选项卡的内容1</a></li> <li> <a href="#" >我是第一个选项卡的内容2</a></li> <li> <a href="#" >我是第一个选项卡的内容3</a></li> <li> <a href="#" >我是第一个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第二个选项卡的内容1</a></li> <li> <a href="#" >我是第二个选项卡的内容2</a></li> <li> <a href="#" >我是第二个选项卡的内容3</a></li> <li> <a href="#" >我是第二个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第三个选项卡的内容1</a></li> <li> <a href="#" >我是第三个选项卡的内容2</a></li> <li> <a href="#" >我是第三个选项卡的内容3</a></li> <li> <a href="#" >我是第三个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第四个选项卡的内容1</a></li> <li> <a href="#" >我是第四个选项卡的内容2</a></li> <li> <a href="#" >我是第四个选项卡的内容3</a></li> <li> <a href="#" >我是第四个选项卡的内容4</a></li> </ul> </div> <div> <ul> <li> <a href="#" >我是第五个选项卡的内容1</a></li> <li> <a href="#" >我是第五个选项卡的内容2</a></li> <li> <a href="#" >我是第五个选项卡的内容3</a></li> <li> <a href="#" >我是第五个选项卡的内容4</a></li> </ul> </div> </div>
CSS样式
css代码就不做详细的说明了