网页选项卡的应用

来源：互联网发布：乐视for mac 编辑：程序博客网时间：2024/05/16 03:01

（1）功能描述
在页面中，设置三个不同名称的选项卡，当点击某个选项卡时，下面的相对应的区域显示其相应的内容信息，同时选项卡的背景色与内容区域的背景颜色浑然一体，并且字体加粗，表示选中的状态。

（2）代码实现

<!DOCTYPE html><html><head><meta charset="utf-8"><title>网页选项卡的应用</title><style type="text/css">body{font-size: 12px;}ul, li{margin: 0;padding:0;list-style: none;}#menu li{text-align: center;float: left;padding: 5px;margin-right: 2px;width: 50px;cursor: pointer;}#menu li.tabFocus{width: 50px;font-weight: bold;background-color: #f3f2e7;border:1px solid #666;border-bottom: 0;z-index: 100;position: relative;}#content{width: 260px;height: 80px;padding: 10px;background-color: #f3f2e7;clear: left;border:1px solid #666;position: relative;top:-1px;}#content li{display: none;}#content li.conFocus{display: block;}</style><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script type="text/javascript">$(function() {//带参数遍历各个选项卡$("#menu li").each(function(index){$(this).click(function(){//为每一个选项卡添加单击事件$("#menu li.tabFocus").removeClass("tabFocus");$(this).addClass("tabFocus");//增加当前选项中的样式//显示选项卡对应的内容并隐藏未被选中的内容$("#content li:eq("+ index +")").show().siblings().hide();});});})</script></head><body><ul id="menu"><li class="tabFocus">家居</li><li>电器</li><li>二手</li></ul><ul id="content"><li class="conFocus">我是家居的内容</li><li>欢迎您来到电器城</li><li>二手市场，产品丰富多彩</li></ul></body></html>

页面效果如下：

0 0