教程集 > 脚本编程 > javascript > 正文仿126邮箱风格的选项卡菜单效果

仿126邮箱风格的选项卡菜单效果

发布时间：2016-10-20 编辑：jiaochengji.com

教程集为您提供仿126邮箱风格的选项卡菜单效果等资源，欢迎您收藏本站，我们将为您提供最新的仿126邮箱风格的选项卡菜单效果资源

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿旧版126邮箱风格的选项卡菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> body,div,ul,li{ padding:0; text-align:center; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited{ color:#00F; text-decoration:none; } a:hover{ color:#c00; text-decoration:underline; } ul{ list-style:none; } /*选项卡1*/ #Tab1{ width:460px; margin:0px; padding:0px; margin:0 auto; } /*选项卡2*/ #Tab2{ width:576px; margin:0px; padding:0px; margin:0 auto; } /*菜单class*/ .Menubox{ width:100%; background:url(http://www.zzsky.cn/effect/images/201004051950/tab_bg.gif); height:28px; line-height:28px; } .Menubox ul{ margin:0px; padding:0px; } .Menubox li{ float:left; display:block; cursor:pointer; width:114px; text-align:center; color:#949694; font-weight:bold; } .Menubox li.hover{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:url(http://www.zzsky.cn/effect/images/201004051950/tab_on.gif); color:#739242; font-weight:bold; height:27px; line-height:27px; } .Menubox_on{ padding:0px; background:#fff; width:116px; border-left:1px solid #A8C29F; border-top:1px solid #A8C29F; border-right:1px solid #A8C29F; background:url(http://www.zzsky.cn/effect/images/201004051950/tab_on.gif); color:#739242; font-weight:bold; height:27px; line-height:27px; } .Contentbox{ clear:both; margin-top:0px; border:1px solid #A8C29F; border-top:none; height:181px; text-align:center; padding-top:8px; } </style> <script language="javascript"> /*第一种形式第二种形式更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i ){ var menu=document.getElementById(name i); var con=document.getElementById("con_" name "_" i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } </script> </head> <body>

新闻列表1

新闻列表2

新闻列表3

新闻列表4

www.jiaochengji.com

新闻列表2

新闻列表3

新闻列表4

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
仿126邮箱风格的选项卡菜单效果
 asp.net发送邮件的方法汇总
 phpmailer邮件发送实例(163邮箱 126邮箱 yahoo邮箱)
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
 如何使用python发邮件
 windows 7麦克风音量小怎么办?Win7麦克风声音调整教程
 电脑机箱前面板的麦克风没声音怎么解决
 显卡温度过高怎么办显卡温度过高原因分析
 asp.net发邮件找回密码的功能
 基于jQuery的前端数据通用验证库

上一篇：javasctipt 漂亮的感应鼠标导航菜单下一篇：导航菜单-三级折叠竖向下拉导航菜单效果

[关闭]

仿126邮箱风格的选项卡菜单效果

最近更新

浏览排行