林业厅网站建设招标,国家企业信息查询公示系统官网,网站建设制作设计优化,链接收录#xff08;1#xff09;功能描述#xff1a; 在页面中#xff0c;设置三个不同名称的选项卡#xff0c;当单机某个选项卡时#xff0c;下面相对应的区域显示其内容信息#xff0c;同时选项卡的背景色与内容信息的背景色浑然一体#xff0c;并且字体加粗#xff0c;表…1功能描述 在页面中设置三个不同名称的选项卡当单机某个选项卡时下面相对应的区域显示其内容信息同时选项卡的背景色与内容信息的背景色浑然一体并且字体加粗表示出于选中状态。 2实现代码 1 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd2 html xmlnshttp://www.w3.org/1999/xhtml3 head4 title网页选项卡应用/title5 script typetext/javascript srcJscript/jquery-1.4.2.js/script6 style typetext/css7 body{font-size:13px}8 ul,li {margin:0;padding:0;list-style:none}9 #menu li {text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
10 #menu li.tabFocus {width:50px; font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
11 #content {width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
12 #content li{display:none}
13 #content li.conFocus{display:block}
14 /style
15 script typetext/javascript
16 $(function() {
17 $(#menu li).each(function(index) { //带参数遍历各个选项卡
18 $(this).click(function() { //注册每个选卡的单击事件
19 $(#menu li.tabFocus).removeClass(tabFocus); //移除已选中的样式
20 $(this).addClass(tabFocus); //增加当前选中项的样式
21 //显示选项卡对应的内容并隐藏未被选中的内容
22 $(#content li:eq( index )).show()
23 .siblings().hide();
24 });
25 });
26 })
27 /script
28 /head
29 body
30 ul idmenu
31 li classtabFocus家居/li
32 li电器/li
33 li二手/li
34 /ul
35 ul idcontent
36 li classconFocus我是家居的内容/li
37 li欢迎您来到电器城/li
38 li二手市场产品丰富多彩/li
39 /ul
40 /body
41 /html 结果如下图所示 转载于:https://www.cnblogs.com/baixc/p/3393372.html
