<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
a {
color:#000000;
text-decoration:none;
}
#header {
float:left;
width:100%;
background:#D3D3D3;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:0px;
list-style:none;
}
#header li {
float:left;
background:#DCE1EF;
border:solid 1px #8EA2C2;
margin-left:2px;
padding:0px;
}
#header a {
display:block;
padding:5px 15px 4px;
}
#header .current {
background:#FFFFFF;
border-left:solid 1px #8EA2C2;
border-top:solid 1px #8EA2C2;
border-right:solid 1px #8EA2C2;
border-bottom:solid 0px #8EA2C2;
}
#header .current a{
padding-bottom:5px;
}
.content {
margin-top:10px;
}
.content .contentHeader {
background-color:#BCC7E0;
border:solid 1px #4B66A5;
font-weight:bold;
}
.content .contentMain {
border-left:solid 1px #4B66A5;
border-top:solid 0px #4B66A5;
border-right:solid 1px #4B66A5;
border-bottom:solid 1px #4B66A5;
}
</style>
<script type="text/javascript">
function change_option(number,index){
for (var i = 1; i <= number; i++) {
document.getElementById('current' + i).className = '';
document.getElementById('content' + i).style.display = 'none';
}
document.getElementById('current' + index).className = 'current';
document.getElementById('content' + index).style.display = 'block';
}
</script>
CSS中的滑动门技术
</head>
<body>
关山月
明月出天山，苍茫云海间。
长风几万里，吹度玉门关。
汉下白登道，胡窥青海湾。
由来征战地，不见有人还。
戍客望边色，思归多苦颜。
高楼当此夜，叹息未应闲。
清平乐
春归何处
寂寞无行路。
若有人知春去处。
唤取归来同住。
春无踪迹谁知。
除非问取黄鹂。
百啭无人能解，因风飞过蔷薇。
三国演义
滚滚长江东逝水，浪花淘尽英雄。
是非成败转头空，青山依旧在几度夕阳红。
|
</body>
</html>
分享到：
相关推荐
本文实例为大家分享了JavaScript实现简易tab栏切换效果的具体代码，供大家参考，具体内容如下 tab栏分析 li里面的分析 js实现隐藏与显示 排他思想： 1）、所有元素全部清除样式（干掉其他人） 2）、给当前...
简单纯js实现网页tab选项卡切换效果，简单，实用，方便
javascript实现简易的tab选项卡切换效果
简单的javascript+css实现Tab效果，内含javascript 事件介绍。
主要介绍了js实现的tab标签切换效果，功能非常简单，实现了点击切换的效果，推荐给大家，有需要的小伙伴可以参考下。
本文实例为大家分享了JS实现简单tab选项卡切换的具体代码，供大家参考，具体内容如下 本人在上一篇文章也写了用JS来实现tab选项卡切换效果，但是上次的那个代码比较复杂，这次是简化版的。 <!DOCTYPE html> <...
今天做一个简单的小案例，用js和jquery分别去实现点击tab栏，实现切换的目的，效果如下图： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> 状态栏切换</title> <style> * { ...
本篇文章主要是对js(JavaScript)实现TAB标签切换效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
主要介绍了JS实现简单的tab切换选项卡效果,涉及javascript结合鼠标事件对页面元素属性动态操作的相关技巧,需要的朋友可以参考下
Vue是一个小巧轻便的JavaScript库。它有一个简单易懂的API，能够让开发者在开发web应用的时候更加简易便捷。实际上，一直让Vue引...下面是我用vue.js来实现的tab切换功能。 <!--这里是html结构--> <li
主要介绍了js简单实现竖向tab选项卡的方法,涉及javascript实现tab切换效果的相关技巧,非常简单实用,需要的朋友可以参考下
主要介绍了JS简单实现tab切换效果的多窗口显示功能,可实现响应鼠标事件的文字切换显示效果,涉及javascript页面元素遍历与样式变换相关操作技巧,需要的朋友可以参考下
本文实例讲述了JS实现的简单tab切换功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net tab切换</title&...
本文实例讲解了4种JavaScript实现简单tab选项卡切换的方法，分享给大家供大家参考，具体内容如下 效果图： 方法一：for循环+if判断当前点击与自定义数组是否匹配 <!DOCTYPE html> <html lang="en"> &...
主要介绍了JS实现滑动菜单效果代码,以实例形式实现了包括Tab,选项卡,横向等效果,非常简单实用,需要的朋友可以参考下
三种js特效（tab活页夹，斑马线，遮罩层）的简单实现.rar
主要介绍了js实现的tab标签切换效果，功能实现非常简单，推荐给大家，有需要的小伙伴可以参考下。
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。