<html>
<head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.tabs{
width: 100%;
margin: 0;
padding: 4px 0 0 4px ;
list-style: none;
background: #fff url(img02/nav_gb2.gif) repeat-x bottom left;
font-size: 12px;
border-bottom: none;
}
.tabs li{
float: left;
margin: 0;
padding: 0;
font-family: "宋体", sans-serif;
}
.tabs a{
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #d2d2d2;
border-bottom: none;
background: #fff;
}
.tabs a:hover , body .up a{
color: #333;
padding-bottom: 5px;
border-color: #d2d2d2;
background: #f1f1f1;
}
.tab{
width: 100%;
margin: 0;
padding: 4px 0 0 4px;
border: 1px solid #d2d2d2;
border-top: none;
background: #f1f1f1;
}
.tab li{
float: left;
padding: 6px;
}
.tab2{
width: 100%;
margin: 0;
padding: 4px 0 0 4px;
border: 1px solid #d2d2d2;
border-top: none;
background: #f1f1f1;
display: none;
}
.tab2 li{
float: left;
padding: 6px;
}
</style>
<script type="text/javascript">
function showtab(n,count){
for(var i=1;i<=count;i++){
if (i==n){
getObject('tab'+i).style.display='block';
}
else {
getObject('tab'+i).style.display='none';
}
}
}
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
return document.getElementById(objectId);
} else if (document.all && document.all(objectId)) {
return document.all(objectId);
} else if (document.layers && document.layers[objectId]) {
return document.layers[objectId];
} else {
return false;
}
}
</script>
</head>
<body>
<ul class="tabs">
<li class="up"><a href="#" rel="external" onmousemove="showtab(1,3);" id="a1">> XHTML学习</a></li>
<li><a href="#" rel="external" onmousemove="showtab(2,3);" id="a2">> 网站设计</a></li>
<li><a href="#" rel="external" onmousemove="showtab(3,3);" id="a3">> 我的收藏</a></li>
</ul>
<div id="tab1" class="tab">
<ul>
<li>1.dkjldfld</li>
<li>2.dkfdlsld</li>
<li>3.dkfdlsld</li>
<li>4.dkfdlsld</li>
<li>5.dkflskdvs</li>
</ul>
</div>
<div id="tab2" class="tab2">
<ul>
<li>5.dkflskdvs</li>
<li>4.dkjldfld</li>
<li>3.dkfdlsld</li>
<li>2.dkfdlsld</li>
<li>1.dkfdlsld</li>
</ul>
</div>
<div id="tab3" class="tab2">
<ol>
<li>#.dkflskdvs</li>
<li>#.dkjldfld</li>
<li>#.dkfdlsld</li>
<li>#.dkfdlsld</li>
<li>#.dkfdlsld</li>
</ol>
</div>
</body>
</html>
分享到：
相关推荐
tab选项卡是常见的网页效果，也叫滑动门特效，本资源实现自动调转和手动（click onmouseover）切换
本文实例讲述了js与jquery分别实现tab标签页功能的方法。分享给大家供大家参考，具体如下： 首先列出样式和html标签 <style type="text/css"> *{margin: 0;padding: 0;} #myul li {list-style: none; float...
这是一款基于js实现的tab标签切换效果，是一款无需jQuery，原生javascript制作的tab切换效果源码。点击上面的标题即可实现对应页面的切换功能，非常具有实用价值。 运行效果图：——————-查看效果 下载源码——...
本文实例讲述了JavaScript实现的原生态Tab标签页功能。分享给大家供大家参考，具体如下： 标签页是一个很常见的东西，在一些框架中也就很常见的， 但未必所有人都知道怎么写，很多人知道怎么在网上复制一份是真的， ...
本文实例讲述了jquery ui 实现 tab标签功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html> <head> <title>www.jb51.net tab切换</title> <style type="text/css">...
最便捷的上网导航,增强新标签页(New Tab)功能,实现快速拨号,网站一键到达.含天气,显示IP地址,万年历日历,收藏夹,更改壁纸,搜索,常用工具等功能.独有的云备份让网址和标签在线保存,自动同步. 微度新标签页4大功能...
jsp页面，html页面用于支持视频播放的插件，通过video标签实现视频播放功能
本文实例讲述了JS+HTML实现自定义上传图片按钮并显示图片功能的方法。分享给大家供大家参考，具体如下： 在web开发中，上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮，且不能修改...
在实现过程中，我们可以使用html5的audio标签来播放音乐，并结合audio.js库来实现更多的功能。通过使用audio.js库，我们可以实现音乐的随机播放、音量调节、暂停/播放等功能，同时还可以自定义播放器的样式和皮肤。 ...
效果和说明文档：http://www.healdream.com/upLoad/html/jquery/tabs/index_zh.html下载：http://www.51files.com/?2LDPUOZ0F56P52ZLDNYD之前通过yui也实现了相同的功能，但是yui有个比较大的缺点就是js文档太大了，...
该页面引用bootstrap.js，实现HTML5，左右拖拽标签功能，标签拖入表格显示一行标签，并且能够删除
该模块将实现用户的博客发布、修改、删除等功能，并包括博客分类、博客标签、博客评论等功能。 ## 留言板模块 该模块将实现用户留言、回复等功能，并包括留言板分页、留言过滤等功能。 ## 后台管理模块 该模块将...
有时候我们做的简单评论功能会发现有提交很多的html标签，这些标签会导致页面有一些外连的情况，下面我们一起来看在php中过滤表单提交的html标签方法。 近评论中有一些机器人提交的post链接，都是一些垃圾评论。为了...
本文实例讲述了AngularJS实现标签页tab选项卡功能。分享给大家供大家参考，具体如下： 选项卡一： JavaScript+html+css <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&...
jQuery实现tab栏切换效果 本文实例为大家分享了jQuery实现tab栏切换效果的具体代码...-- tab标签 --> <nav class="firstnav"> <!-- tab栏标题 --> <ul> <li class="liactive"> 测试1</span> <span class="close
html2canvas是一个相当不错的JavaScript类库，它使用了html5和css3的一些新功能特性，实现了在客户端对网页进行截图的功 能。html2canvas通过获取页面的DOM和元素的样式信息，并将其渲染成canvas图片，从而实现给...
非表单标签：主要用于生成页面上的tree，Tab页等。 非用户界面标签(非UI标签)：主要用于数据访问，逻辑控制。 数据访问标签：主要包含用于输出值栈(ValueStack)中的值，完成国际化等功能的标签。 流程控制标签：主要...
鼠标移动到tab标签上实现切换的功能，代码简洁易修改
最近在做一个学校的XXX系统项目，因项目有个需求就是要像在word里面的添加批注功能一样，就是选中一段文字，然后为这些页面添加一些额外的信息；刚开始我们的方案是记录选中内容的下标，然后保存到数据库中，当要...
html5 仿微信聊天界面web微信，这个界面中使用了TAB标签效果、圆角边框、以及背景平铺特效，应用了HTML5最新的技术来实现，兼容PC端和移动端浏览器，整体看上去唯美漂亮，很不错的效果。