css滑动门 (很简单好用)

最新推荐文章于 2022-09-19 11:50:13 发布
最新推荐文章于 2022-09-19 11:50:13 发布
阅读量131 收藏 1
点赞数
分类专栏： Html/Css 文章标签： CSS JavaScript XHTML HTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m1maomao/article/details/83368973
版权

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

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

<div class="nTab">
   <!-- TOP -->
   <div class="TabTitle">
          <ul id="myTab1">
            <li class="active" οnclick="nTabs(this,0);">星期一</li>
            <li class="normal" οnclick="nTabs(this,1);">星期二</li>
            <li class="normal" οnclick="nTabs(this,2);">星期三</li>
            <li class="normal" οnclick="nTabs(this,3);">星期四</li>
            <li class="normal" οnclick="nTabs(this,4);">星期五</li>
            <li class="normal" οnclick="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" οnclick="nTabs(this,0);">星期一</li>
            <li class="normal" οnclick="nTabs(this,1);">星期二</li>
            <li class="normal" οnclick="nTabs(this,2);">星期三</li>
            <li class="normal" οnclick="nTabs(this,3);">星期四</li>
            <li class="normal" οnclick="nTabs(this,4);">星期五</li>
            <li class="normal" οnclick="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>

m1maomao
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 滑动门
林彬的专栏
06-03 1059
先来体会下现实中的滑动门,或者你可以叫做推拉门： 滑动门出现的背景 制作网页时，为了美观，常常需要为网页元素设置特殊形状的背景，比如微信导航栏，有凸起和凹下去的感觉，最大的问题是里面的字数不一样多，咋办？ 为了使各种特殊形状的背景能够自适应元素中文本内容的多少，出现了CSS滑动门技术。它从新的角度构建页面，使各种特殊形状的背景能够自由拉伸滑动，以适应元素内部的文本内容，可用性更强。 最常见于各...
[转贴]CSS中的滑动门技术
Tanden 编程专栏
08-03 917
作者：nobita 2005-5-8 9:39:31ISSN: 1534-0295. 20 October 2003 – Issue No. 160原文作者：Douglas Bowman 原文出自：A List Apart 中文翻译：54player.com nobita 版权说明：本文中文翻译版权归译者54player.com nobita所有。需要转载发表的，请先与作者联系 在CS
CSS中的滑动门
weixin_43755513的博客
07-27 146
CSS中的滑动门
css之滑动门
little_newBee的博客
07-13 385
## 什么是滑动门？ ## 所谓的滑动门，可以这样理解，菜单的 背景图(圆角，直角，其它等)会根据文字的多少而自动变长(变短)，这好象一个可滑动的门一样.  ## 如何实现滑动门？ ## 滑动门主要是内容自适应，因此就变成了如何让内容自适应，具体是有高度的具有包裹性的表现，因此float是首选。
css滑动门
落叶
07-13 230
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .menu{ margin:
css 滑动门技术的介绍及实例分享
12-12
CSS滑动门技术是一种在网页设计中用于创建动态效果的技术，尤其常见于导航菜单的设计中。这项技术的主要目的是通过CSS（层叠样式表）来改变菜单项的背景图像位置，以便根据文字内容的长度自动调整，呈现出类似门滑动...
CSS教程:专门介绍滑动门
12-09
滑动门(Sliding Doors) 还是决定把滑动门单独提作一种单独的技术. 它是CSS引入的一项用来创造漂亮且实用的界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现。 滑动门一般用做网站Tab导航,...
DIV+CSS 滑动门技术的简单例子
10-31
总结起来，这个简单的滑动门例子展示了如何使用CSS控制元素的背景位置来创建交互式的导航菜单。通过调整背景图片的位置，我们可以改变元素的外观，实现各种视觉效果。这种技术在网页设计中非常常见，因为它能够提升...
基于HTML+CSS实现网页滑动门效果
09-27
4. **滑动门实例**：你可以根据上述代码创建一个简单的滑动门效果。为了实现不同的滑动效果，可以为不同的`<div>`设置不同的背景色和宽高，如`.div2`和`.div3`。此外，还可以通过调整`left`属性值来改变内容滑出的...
CSS滑动门代码下载，CSS滑动门魅力
05-12
综上所述，这个名为"okbase.net"的压缩包文件很可能是包含多种CSS滑动门效果的代码库，提供了丰富的示例和可能的JavaScript辅助，有助于网页设计师和开发者学习和应用CSS滑动门技术，提升网站的用户体验和视觉吸引力...
CSS滑动菜单（滑动门）
05-11
CSS滑动菜单（滑动门）效果,CSS滑动菜单（滑动门）效果CSS滑动菜单（滑动门）效果
HTML+CSS实现的滑动门选项卡
11-06
jqury导航栏 jqury特效 HTML+CSS 滑动门 选项卡
CSS的滑动门技术
xiao____ming的博客
09-21 1389
在制作导航栏等网页元素时，常常需要为其设置特殊形状的背景，为了使各种特殊形状的背景能够自适应元素中文本的多少，即实现自由拉伸滑动，就出现了CSS滑动门技术。 微信的导航栏： 滑动门简单使用： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a { display
css定位，滑动门
weixin_73310187的博客
09-19 319
为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。最常见于各种导航栏的滑动门。
CSS中的滑动门技术
风过留声
05-25 1429
原文地址：http://www.planabc.net/article.asp?id=107学习标准的朋友，一般都会在学习的过程中接触到CSS滑动门技术，或许大家也都看过这篇文章《CSS中的滑动门技术》，如果你还没接触过或还没看过上文或有点忘记内容，也没关系，可以点击上面的文章链接，先了解或温习一遍。在《CSS中的滑动门技术》一文中的滑动门例子，大家仔细实验，或许已经发现，链接区有9像素的盲点
css滑动门技术的应用,CSS滑动门技术
weixin_39898248的博客
08-03 270
在自然界中，很多地方可以看到圆的曲线，甚至是圆的形状。就算是边边角角也都是圆润的弧度。例如：dva的性感小屁股。反观尖锐的90°直角在自然界中反到变成了一个另类。而在编写网页的时候也经常会用到“圆角”这类的表达方式，不得不承认圆角图形确实比直角图形有更友好的交互体验。dva圆角相关的解决方法有好几种。其中用图片解决圆角问题那是最简单粗暴，如果宽高是固定且已知的，直接background-image...
html div向上偏移了,纯CSS实现网页内部锚点跳转时上下偏移的示例代码
weixin_33734921的博客
06-03 700
最近在做我的“足球导航”网站的时候遇到一个网页内部锚点跳转后向下偏移一点，以避免被顶部固定导航栏遮住的需求。网上搜索了一些方法，大多数都是利用js在跳转时候进行控制，后来在一个国外开发者的个人博客上发现一个只用css实现的方法，觉得简洁的很，顺手将他的实现方法翻译过来。通常我们网页顶部的固定导航栏的的样式实现如下：随后，会有一个跳转的a链接列表：Anchor TextAnchor Text需求是点...
html css 滑动门效果,这么简单就实现了CSS滑动菜单(滑动门)
weixin_28339527的博客
06-09 295
如此简单就实现了CSS滑动门*{font-size:9pt;}ul li { list-style: none; }ul, li { margin: 0; padding: 0;}.tabs,.tabs_act{float:left;width:103px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;height:25px;te...
js实现多项滑动门选项卡特效
最新发布
05-29
好的，以下是一个简单的实现多项滑动门选项卡特效的示例代码： HTML结构： ``` <div class="tab-container"> <div class="tabs"> <span class="tab active">Tab 1</span> <span class="tab">Tab 2</span> <span class="tab">Tab 3</span> </div> <div class="tab-contents"> <div class="tab-content active"> <p>Tab 1 content</p> </div> <div class="tab-content"> <p>Tab 2 content</p> </div> <div class="tab-content"> <p>Tab 3 content</p> </div> </div> </div> ``` CSS样式： ``` .tab-container { width: 100%; } .tabs { display: flex; justify-content: space-between; margin-bottom: 10px; } .tab { cursor: pointer; padding: 10px; background-color: #eee; } .tab.active { background-color: #fff; border-bottom: 2px solid #000; } .tab-contents { width: 100%; } .tab-content { display: none; padding: 10px; } .tab-content.active { display: block; } ``` JavaScript代码： ``` const tabs = document.querySelectorAll('.tab'); const tabContents = document.querySelectorAll('.tab-content'); tabs.forEach((tab, index) => { tab.addEventListener('click', () => { // 切换选项卡的 active 类 tabs.forEach(tab => tab.classList.remove('active')); tab.classList.add('active'); // 切换选项卡内容的 active 类 tabContents.forEach(tabContent => tabContent.classList.remove('active')); tabContents[index].classList.add('active'); }); }); ``` 以上代码实现了一个基础的多项滑动门选项卡特效，具体效果可以根据实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值