<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 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
至此，一个简单的JS实现的Tab菜单效果就完成了。这个基础的实现可以作为起点，根据实际需求进行扩展，例如添加键盘导航支持、触发动画、响应式布局等特性。理解这一过程对于网页开发者来说至关重要，因为它能帮助...
JavaScript 实现简易 tab 栏切换是一种常见的网页交互功能，它允许用户通过点击不同的选项卡来切换显示的内容。在本文中，我们将深入理解如何使用 JavaScript 来实现这一效果，并结合给出的代码片段进行详细讲解。 ...
本教程将详细讲解如何使用纯JavaScript实现简单的选项卡切换效果。 首先，我们需要在HTML中创建选项卡结构。通常，一个选项卡组件包含一组标签（tab headers）和相应的内容区域（tab panes）。每个标签对应一个内容...
以上就是使用JavaScript实现简易选项卡切换效果的基本步骤。这个例子虽然简单，但足以满足大多数基本需求。通过进一步的定制，可以添加更多的动画效果、键盘导航支持等高级功能，以提高用户体验。在实际开发中，你还...
在本文中，我们将深入探讨如何使用纯CSS3实现Tab标签切换效果。Tab切换是一种常见的用户界面设计模式，它允许用户在多个视图或内容区域之间切换，而无需刷新整个页面。这种效果通常用于展示有限数量的相关信息，如...
本教程将基于提供的`tab2011.css`和`tab2011.js`文件，探讨如何通过JavaScript实现一个简单的Tab滚动方法。 首先，`tab2011.css`文件通常包含样式规则，用于定义Tab导航条以及内容区域的布局和样式。例如，它可能...
在JavaScript实现简易tab栏切换内容栏的过程中，我们通常会结合HTML、CSS以及JavaScript来创建一个交互式的用户界面。以下是对这个实例的详细解释： 首先，HTML部分定义了页面的基本结构，包括一个`<div id="nav">`...
在本示例中，我们将探讨如何使用JavaScript实现一个基本的Tab切换效果，这是一种常见的用户界面设计元素，用于在有限的空间内展示多个视图或内容板块。 首先，我们需要创建HTML结构来定义Tab导航和对应的内容区域。...
在网页设计中，Tab效果是一种常见的用户界面设计模式，它允许用户...总的来说，Ajax和jQuery的结合使得创建交互性强、用户体验良好的Tab效果变得简单。通过熟悉这些技术和实践，开发者可以提升网站的动态性和用户体验。
jQuery有许多插件可以方便地实现Tab效果，如jQuery UI的Tabs插件。不过，我们也可以通过编写简单的jQuery代码实现这一功能： ```javascript $(document).ready(function() { $('#tabs ul li a').click(function(e)...
标题 "JavaScript + CSS 实现 Tab 效果" 涉及到的是网页开发中的常见交互设计，即Tab切换功能。这种效果允许用户通过点击不同的标签来显示或隐藏相关内容，提高用户体验，尤其在信息组织和展示时非常实用。下面将...
本文将深入探讨如何使用JavaScript实现浏览器标签页的关闭功能，这对于提升用户体验和网页交互性具有重要意义。 首先，理解浏览器环境下的JavaScript限制是至关重要的。由于安全原因，JavaScript不能直接关闭当前...
标题中的"JS实现简单tab选项卡切换"是指在网页设计中使用JavaScript来创建一个简易的选项卡切换功能。选项卡是一种常见的用户界面元素，用于组织和展示内容，让用户能够通过不同的选项卡浏览多个相关的但互斥的信息...
以上就是一个简单的JavaScript实现自定义Tab的流程。你可以根据项目需求进行扩展，例如添加Ajax加载内容、缓存激活状态等功能。这个过程涉及到了DOM操作、事件处理和基础的CSS样式，是JavaScript Web开发中的基础...
"JS简单实用的网页TAB切换效果"这个主题，就是关于如何利用JavaScript实现这种功能的一个教程。在这个项目中，我们将探讨如何通过HTML结构、CSS样式以及JavaScript脚本来创建一个简单的TAB切换系统。 首先，HTML是...
- Bootstrap：其Nav Pills或Nav Tabs组件可轻松实现Tab效果，只需添加对应的类名，配合数据属性和JavaScript插件即可。 - Vue.js, React, Angular等现代前端框架也有丰富的Tab组件库，如Vue的Vuetify, React的...
JavaScript实现Tab切换效果是一种常见的网页交互技术，用户通过点击不同的标签页来查看对应的内容区域，而其他内容区域则会被隐藏。实现这一效果涉及到了HTML、CSS和JavaScript的结合使用。在本例中，我们通过一个...
以下是一个简单的实现步骤： 1. **HTML结构**：首先，创建Tab按钮和内容区域的HTML结构。通常，我们将Tab按钮设置为链接（`<a>`标签）或者按钮（`<button>`标签），内容区域使用`<div>`标签，并设置初始状态下所有...
下面是一个简单的示例代码，展示了如何使用JavaScript和CSS实现淡入淡出效果的Tab切换： ```html <!-- HTML --> <button id="tab1">Tab 1 <button id="tab2">Tab 2 <div id="content1" class="content">Content...