`

css滑动门 (很简单好用)

CSSJavaScriptXHTMLHTML 
阅读更多

如果是感应触发.就选onmouseover
如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应或点击了]

而如果想在一个页面上有N个滑动门
就复制一套...将myTab0改成myTab1   myTab2   myTab3 等等等..都可以..或者换成你自己喜欢的名字...当然myTab0_Content0这个亦是要随着变动!
-----------------------------------------------------------------------------------------------------------------------------------
html部
-----------------------------------------------------------------------------------------------------------------------------------

<div class="nTab">
   <!-- TOP -->
   <div class="TabTitle">
          <ul id="myTab1">
            <li class="active" onclick="nTabs(this,0);">星期一</li>
            <li class="normal" onclick="nTabs(this,1);">星期二</li>
            <li class="normal" onclick="nTabs(this,2);">星期三</li>
            <li class="normal" onclick="nTabs(this,3);">星期四</li>
            <li class="normal" onclick="nTabs(this,4);">星期五</li>
            <li class="normal" onclick="nTabs(this,5);">星期六</li>
          </ul>
   </div>
   <!-- TOP 完-->
   <!-- 内容-->
   <div class="TabContent">
      <div id="myTab1_Content0">1</div>
      <div id="myTab1_Content1" class="none">2</div>
      <div id="myTab1_Content2" class="none">3</div>
      <div id="myTab1_Content3" class="none">4</div>
      <div id="myTab1_Content4" class="none">5</div>
      <div id="myTab1_Content5" class="none">6</div>
   </div>
   <!-- 内容 完-->
</div>

-----------------------------------------------------------------------------------------------------------------------------------
css部
-----------------------------------------------------------------------------------------------------------------------------------

.nTab{
float: left; font-weight: normal;
width: 300px; height:28px;
margin: 0 auto;
background-position:left;
background-repeat:repeat-y;
}
.nTab .TabTitle{
clear: both; border:0;
height: 28px;
overflow: hidden;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 52px;
height:28px;
cursor: pointer;
margin-right:0px;
padding-right: 0px;
padding-left: 0px;
list-style-type: none;
}
.nTab .TabTitle .active{line-height:28px; color:#FF3300; font-size:14px; text-align:center;}
.nTab .TabTitle .normal{line-height:28px; font-size:12px; color:#712600; text-align:center; }
.nTab .TabContent{ height:40px;border:1px #333333 solid; font-weight: normal;}

.none {display:none;}

-----------------------------------------------------------------------------------------------------------------------------------
js部 加在<head></head>
-----------------------------------------------------------------------------------------------------------------------------------

<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>

========================================以下是完整代码============
<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
.nTab{
float: left; font-weight: normal;
width: 300px; height:28px;
margin: 0 auto;
background-position:left;
background-repeat:repeat-y;
}
.nTab .TabTitle{
clear: both;
border:0;
height: 28px;
overflow: hidden;
background-color: #FFCCFF;
}
.nTab .TabTitle ul{
border:0;
margin:0;
padding:0;
}
.nTab .TabTitle li{
float: left;
width: 52px;
height:28px;
cursor: pointer;
margin-right:0px;
padding-right: 0px;
padding-left: 0px;
list-style-type: none;
}
.nTab .TabTitle .active{
line-height:28px;
color:#FFFFFF;
font-size:14px;
text-align:center;
background-color: #000000;
}
.nTab .TabTitle .normal{line-height:28px; font-size:12px; color:#712600; text-align:center; }
.nTab .TabContent{ height:40px;border:1px #333333 solid; font-weight: normal;}

.none {display:none;}


-->
</style>
<script type="text/javascript">
function nTabs(thisObj,Num){
if(thisObj.className == "active")return;
var tabObj = thisObj.parentNode.id;
var tabList = document.getElementById(tabObj).getElementsByTagName("li");
for(i=0; i <tabList.length; i++)
{
if (i == Num)
{
thisObj.className = "active";
document.getElementById(tabObj+"_Content"+i).style.display = "block";
}else{
tabList[i].className = "normal";
document.getElementById(tabObj+"_Content"+i).style.display = "none";
}
}
}
</script>

</head>

<body><div class="nTab">
   <!-- TOP -->
   <div class="TabTitle">
          <ul id="myTab1">
            <li class="active" onclick="nTabs(this,0);">星期一</li>
            <li class="normal" onclick="nTabs(this,1);">星期二</li>
            <li class="normal" onclick="nTabs(this,2);">星期三</li>
            <li class="normal" onclick="nTabs(this,3);">星期四</li>
            <li class="normal" onclick="nTabs(this,4);">星期五</li>
            <li class="normal" onclick="nTabs(this,5);">星期六</li>
          </ul>
   </div>
   <!-- TOP 完-->
   <!-- 内容-->
   <div class="TabContent">
      <div id="myTab1_Content0">1</div>
      <div id="myTab1_Content1" class="none">2</div>
      <div id="myTab1_Content2" class="none">3</div>
      <div id="myTab1_Content3" class="none">4</div>
      <div id="myTab1_Content4" class="none">5</div>
      <div id="myTab1_Content5" class="none">6</div>
   </div>
   <!-- 内容 完-->
</div>


</body>
</html>

分享到：
| 鼠标经过input时的颜色发生变化
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    基本型的CSS滑动门下载.rar

    总的来说，这个基本型的CSS滑动门提供了一种无需JavaScript的简单解决方案，用于在网页中实现Tab选项卡效果，并且已经考虑到了对老版本浏览器的兼容，对于初学者和有一定经验的前端开发者都是一个有价值的参考资料。...

    JQ+CSS图片滑动门

    【JQ+CSS图片滑动门】是一种常见的网页动态效果，用于展示一组图片，通过CSS样式和JavaScript（JQuery库）实现平滑的过渡动画，让用户体验更佳。这种技术结合了HTML的基础结构，CSS的艺术设计，以及jQuery的高效处理...

    三个形式多样的CSS滑动门实例集

    这个"三个形式多样的CSS滑动门实例集"提供了三种不同的滑动门效果，可以帮助开发者更好地理解和应用这一技术。 1. **滑动门原理**： 滑动门技术的核心在于利用CSS的背景定位属性（background-position）和伪类选择...

    CSS3滑动门网页.rar

    "CSS3滑动门网页.rar" 这个标题暗示了这是一个使用CSS3技术实现的网页设计示例，特别是一种被称为“滑动门”（Sliding Doors）的技术，通常用于创建美观的导航菜单。滑动门技术利用CSS的背景定位特性，为元素的左右...

    滑动门效果、html、css

    虽然仅用CSS可以实现基本的滑动门效果，但JavaScript可以提供更复杂的功能，比如动画效果的控制、触摸设备的支持等。使用JavaScript库如jQuery，可以更方便地实现这些功能。例如，以下jQuery代码可以实现平滑的滑动...

    CSS高级技巧之滑动门技术教程.rar

    这个滑动门技术虽然简单，但能够创造出丰富的视觉效果，增强用户体验。通过结合其他CSS3特性，如渐变、阴影和过渡，可以进一步提升滑动门效果的细腻度和流畅性。 学习完这个教程后，你可以尝试应用于实际项目，比如...

    点击切换的Ajax CSS滑动门代码.rar

    "点击切换的Ajax CSS滑动门代码" 是一个实现这种功能的实例，它结合了Ajax、CSS和JavaScript技术，提供了一种动态且高效的交互体验。以下是对这个代码实现的详细解析： 1. **Ajax（异步JavaScript和XML）**：Ajax的...

    Tab滑动门与导航菜单JS+CSS代码

    Tab滑动门与导航菜单JS+CSS代码,简单易用.

    比较经典的CSS滑动门切换栏目

    根据提供的文件信息，本文将详细解释“比较经典的CSS滑动门切换栏目”的核心知识点，包括其设计理念、实现方法以及代码示例。 ### 一、设计理念 #### 1.1 概述 “滑动门”（Sliding Doors）是一种利用CSS来创建...

    CSS中的滑动门技术

    总的来说，CSS滑动门技术是CSS技巧中的一种创新实践，它不仅提升了界面的视觉吸引力，还提高了用户体验，特别是对于动态响应和无障碍设计有着重要的贡献。通过熟练掌握这种方法，开发者可以创造出更具吸引力和实用性...

    DIV+CSS 滑动门技术简单的例子.pdf

    ### DIV+CSS滑动门技术知识点详解 #### 一、滑动门技术概述 滑动门技术（Sliding Doors Technique）是一种使用HTML和CSS来创建复杂背景或图像的技术，尤其适用于按钮、导航栏等需要复杂视觉效果的设计。该技术的...

    这么简单就实现了CSS滑动菜单（滑动门）

    这么简单就实现了CSS滑动菜单（滑动门）

    CSS滑动门代码下载，CSS滑动门魅力

    综上所述，这个名为"okbase.net"的压缩包文件很可能是包含多种CSS滑动门效果的代码库，提供了丰富的示例和可能的JavaScript辅助，有助于网页设计师和开发者学习和应用CSS滑动门技术，提升网站的用户体验和视觉吸引力...

    css实现网易滑动门TAB导航菜单

    css实现网易滑动门TAB导航菜单的html代码，简单编写了导航菜单。

    div+css特效简单导航水平导航滑动门导航白色圆角

    div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角 div+css特效简单导航水平导航滑动门导航白色圆角

    html滑动门案例

    一个简单的滑动门通常由两个部分组成：主容器和子元素。主容器是整个滑动门的外框，而子元素则是每个可滑动的部分，比如导航链接。在HTML中，这些子元素可以是`&lt;a&gt;`标签，代表各个导航选项。 ```html 选项1 选项...

    CSS加JS滑动门效果

    这里的CSS代码定义了滑动门的初始状态和鼠标悬停时的状态。`transition`属性用于添加平滑过渡效果，`transform: translateX()`则控制左右两部分的滑动方向。 最后，JavaScript的加入可以为滑动门效果提供更高级的...

    js+css滑动门,兼容各主流浏览器

    纯js+css实现的滑动门技术，兼容各主流浏览器 ie各版本、Firefox、Opera、谷歌浏览器 非常简单易懂

    css+div的滑动门的

    ### CSS滑动门原理 滑动门的核心思想是将一个元素的背景分为两部分：左侧和右侧，分别代表元素的开启和关闭状态。当鼠标悬停在元素上时，通过改变背景图的位置，使得开启状态的图片部分展示出来，形成一种“滑动”...

Magicbox
Global site tag (gtag.js) - Google Analytics