html 页面标签转换效果实例
来源:互联网 发布:mac下载汉仪颜体 编辑:程序博客网 时间:2024/06/07 10:06
一个HTML的页面标签转换效果,贴出来。供大家参考
先来一张图
如图,页面的左右两边都可以进行切换。
代码很简单,首先需要jquary的js。
主要HTML代码:
<div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <ul class="tabs"> <li><a href="#" title="content_1" class="tab active">信息</a></li> <li><a href="#" title="content_2" class="tab">数据</a></li> <li><a href="#" title="content_3" class="tab">曲线</a></li> <li><a href="#" title="content_4" class="tab">地图</a></li> </ul> <div id="content_1" class="content"> 信息 </div> <div id="content_2" class="content"> 数据 </div> <div id="content_3" class="content"> 曲线 </div> <div id="content_4" class="content"> 地图 </div> </div></div>主要js代码:
<script> // When the document loads do everything inside here ... $(document).ready(function(){// When a link is clicked$("a.tab").click(function () {// switch all tabs off$(".active").removeClass("active");// switch this tab on$(this).addClass("active");// slide all content up$(".content").slideUp();// slide this content upvar content_show = $(this).attr("title");$("#"+content_show).slideDown();});var vheight = $(window).height();$("body").height(vheight-70);$(".content").height(vheight-70); }); </script>主要css代码:
body { background-color: #336699; overflow-y:scroll; margin-left: 5px;margin-top: 5px;margin-right: 5px;margin-bottom: 5px;}#tabbed_box_1 { margin: 0 auto; width: 100%;height:100%;}.tabbed_box h4 { color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 23px; letter-spacing: -1px; margin-bottom: 10px;}.tabbed_box h4 small { color: #e3e9ec; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; font-weight: normal; left: 6px; letter-spacing: 0; position: relative; text-transform: uppercase; top: -4px;}.tabbed_area { background-color: #336699; border: 0px solid #494e52; padding: 8px;height:100%;}ul.tabs { margin: 5px 0 6px; padding: 0;}ul.tabs li { display: inline; list-style: outside none none;}ul.tabs li a { background-color: #464c54; background-image: url("images/tab_off.jpg"); background-position: center bottom; background-repeat: repeat-x; border: 1px solid #464c54; color: #ffebb5; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 15px; font-weight: bold; padding: 8px 14px; text-decoration: none; text-transform: uppercase;}ul.tabs li a:hover { background-color: #2f343a; border-color: #2f343a;}ul.tabs li a.active { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #ffffff; background-image: url("images/tab_on.jpg"); background-position: center top; background-repeat: repeat-x; border-color: #464c54 #464c54 #ffffff; border-image: none; border-style: solid; border-width: 1px; color: #282e32;}.content { background-color: #ffffff; background-image: url("images/content_bottom.jpg"); background-position: center bottom; background-repeat: repeat-x; border: 1px solid #464c54; font-family: Arial,Helvetica,sans-serif; padding: 10px;}#content_2, #content_3,#content_4 { display: none;}.content ul { margin: 0;}.content ul li { font-size: 13px; list-style: outside none none; padding-bottom: 3px; padding-top: 3px;}.content ul li:last-child { border-bottom: medium none;}.content ul li a { color: #3e4346; text-decoration: none;}.content ul li a small { color: #8b959c; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 9px; left: 4px; position: relative; text-transform: uppercase; top: 0;}.content ul li a:hover { color: #a59c83;}.content ul li a:hover small { color: #baae8e;}这里需要注意标签的开始隐藏在这里需要设置
#content_2, #content_3,#content_4 { display: none;}顺便将我右边页面的代码全部贴出
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link media="screen" type="text/css" href="css_system/rightTabs.css" rel="stylesheet"><script type="text/javascript" src="js_system/jquery-1.11.2.js"></script><title>无标题文档</title><style type="text/css"><!--.STYLE1 {color: #0066FF}.mydiv {text-align: center;padding:5px;margin:auto;}--></style></head><body><div id="tabbed_box_1" class="tabbed_box"> <div class="tabbed_area"> <ul class="tabs"> <li><a href="#" title="content_1" class="tab active">信息</a></li> <li><a href="#" title="content_2" class="tab">数据</a></li> <li><a href="#" title="content_3" class="tab">曲线</a></li> <li><a href="#" title="content_4" class="tab">地图</a></li> </ul> <div id="content_1" class="content"> 信息 </div> <div id="content_2" class="content"> 数据 </div> <div id="content_3" class="content"> 曲线 </div> <div id="content_4" class="content"> 地图 </div> </div></div></body><script> // When the document loads do everything inside here ... $(document).ready(function(){// When a link is clicked$("a.tab").click(function () {// switch all tabs off$(".active").removeClass("active");// switch this tab on$(this).addClass("active");// slide all content up$(".content").slideUp();// slide this content upvar content_show = $(this).attr("title");$("#"+content_show).slideDown();});var vheight = $(window).height();$("body").height(vheight-70);$(".content").height(vheight-70); }); </script></html>
0 0
- html 页面标签转换效果实例
- HTML与CSS简单页面效果实例
- HTML与CSS简单页面效果实例
- html页面里面的标签转换
- HTMl与CSS简单页面页面效果实例
- html页面滚动效果之marquee标签详解
- CSS基础-37HTML与CSS简单页面效果实例
- PHP将数据库中的html标签转换到页面显示
- java截取带html标签的字符串,再把标签补全(保证页面显示效果)
- java截取带html标签的字符串,再把标签补全(保证页面显示效果)
- HTML页面放大镜效果
- HTML 基础标签实例
- HTML基础标签实例
- Html标签使用实例
- HTML标签转换
- 常用HTML标签显示效果
- HTML标签及效果大全
- html标签特效代码大全(让你制作漂亮的页面效果)
- 初创互联网公司简明创业指南 - YC新掌门Sam Altman
- 如何在低流量站点进行A/B分离测试?
- Python对MySQL数据库的操作
- Leetcode: Combination Sum
- 【DP】 HDOJ 4284 Travel
- html 页面标签转换效果实例
- OC中Block的使用
- Java中Set的使用
- 致IT同仁 — IT人士常犯的17个职场错误
- OC——copy语法的基本使用
- Yii登陆添加验证码
- HDU 4003 Find Metal Mineral 树形DP
- Android 一步一步实现版本自动更新(第二步 下载和安装apk)
- Android中的Handler的具体用法