滑动TAB，滑动门

最新推荐文章于 2024-07-11 17:36:21 发布
最新推荐文章于 2024-07-11 17:36:21 发布
阅读量110 收藏
点赞数
分类专栏： JavaScript 文章标签： CSS 阿里巴巴 JavaScript 网页游戏 游戏 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_3119/article/details/81923899
版权

 

滑动TAB，滑动门，CSS+Js代码，貌似很不错的样子，风格经典，鼠标感应很不错，代码量少，用到网页上挺不错的。

 

<!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>
<title>滑动TAB</title>
<script language="javascript">
function tabChange(obj,id)
{
 var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组
 var arrayul = document.getElementById(id).getElementsByTagName("ul"); //获取ul数组
 for(i=0;i<arrayul.length;i++)
 {
  if(obj==arrayli[i])
  {
   arrayli[i].className = "cli";
   arrayul[i].className = "";
  }
  else
  {
   arrayli[i].className = "";
   arrayul[i].className = "hidden";
  }
 }
}
</script>
<style type="text/css">
.tabbox {width:300px;height:250px;}
.tabmenu {width:295px;height:28px;border-left:1px solid  #CCC;border-top:1px solid #ccc;}
.tabmenu ul { margin:0;padding:0;list-style-type: none;}
.tabmenu li { text-align:center; float:left; display:block; width:58px; height:27px; overflow:hidden; background-color: #D2E8F7; line-height:27px; border-right:#ccc 1px solid; border-bottom:#ccc 1px solid; display:inline; font-size:12px;}
.tabmenu .cli {text-align:center;float:left;display:block;width:58px;height:27px;overflow:hidden;background-color: #fff;line-height:27px;border-right:#ccc 1px solid;border-bottom:#fff 1px solid;display:inline;font-size:12px; cursor:pointer;}
#tabcontent {width:294px;background-color:#fff;border-left:#CCC 1px solid;border-right:#CCC 1px solid;border-bottom:#CCC 1px solid;}
#tabcontent ul {margin:0;padding:5px;list-style-type: none;}
#tabcontent .hidden {display:none;}
#tabcontent li {text-align:left; }
</style>
</head>
<body>
<div align="center">
 <div class="tabbox">
  <div class="tabmenu">
   <ul>
    <li οnmοuseοver="tabChange(this,'tabcontent')" class="cli">军事</li>
    <li οnmοuseοver="tabChange(this,'tabcontent')">娱乐</li>
    <li οnmοuseοver="tabChange(this,'tabcontent')">国内</li>
    <li οnmοuseοver="tabChange(this,'tabcontent')">国外</li>
    <li οnmοuseοver="tabChange(this,'tabcontent')">游戏</li>
   </ul>
  </div>
  <div id="tabcontent">
   <ul name="tabul">
    <li><a href="#">一款经典简洁的CSS滑动门 </a></li>
    <li><a href="#">强烈推荐的一款CSS导航菜单 </a></li>
    <li><a href="#">绝对经典的滑动门特效代码 </a></li>
    <li><a href="#">企商在线美国主机全线升级！ </a></li>
    <li><a href="#">漂亮的TAB选项卡(标签) </a></li>
    <li><a href="#">CSS+JavaScript阿里巴巴字母</a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">的CSS滑动门代码 </a></li>
    <li><a href="#">强烈推荐的一款CSS导航菜单 </a></li>
    <li><a href="#">绝对经滑动门特效代码 </a></li>
    <li><a href="#">企商在线美国主机全线升级！ </a></li>
    <li><a href="#">仿网易漂亮的TAB选项卡(标签) </a></li>
    <li><a href="#">CSS+JavaScript仿阿里巴巴 </a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">一款经的CSS滑动门代码 </a></li>
    <li><a href="#">强烈推荐的一款CSS导航菜单 </a></li>
    <li><a href="#">绝对经典的滑动门特效代码 </a></li>
    <li><a href="#">企主机全线升级！ </a></li>
    <li><a href="#">仿网易漂亮的TAB选项卡</a></li>
    <li><a href="#">CSS+JavaScript仿阿里巴巴 </a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">一简洁的CSS滑动门代码 </a></li>
    <li><a href="#">强烈推荐的一款菜单 </a></li>
    <li><a href="#">绝对经典的滑动门特效代码 </a></li>
    <li><a href="#">企商在线美全线升级！ </a></li>
    <li><a href="#">仿网易漂亮的TAB选项卡</a></li>
    <li><a href="#">CSS+Java阿里巴巴字母轮换 </a></li>
   </ul>
   <ul class="hidden">
    <li><a href="#">一款经SS滑动门代码 </a></li>
    <li><a href="#">强烈推荐的S导航菜单 </a></li>
    <li><a href="#">绝对经典的滑动门特效代码 </a></li>
    <li><a href="#">企商在线全线升级！ </a></li>
    <li><a href="#">仿网易漂亮的T选项卡(标签) </a></li>
    <li><a href="#">CSS+Jpt仿阿里巴巴字母轮换 </a></li>
   </ul>
  </div>
</div>
</body>
</html>

iteye_3119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html 滑动门效果,js实现简洁的滑动门菜单(选项卡)效果代码
weixin_39900437的博客
06-03 957
本文实例讲述了js实现简洁的滑动门菜单。分享给大家供大家参考。具体如下：一个简洁实用的网页选项卡菜单，在同一个页面中实现两个选项卡，第一个是滑动门，从布局上来说基本是相似的，第二个是选项卡，这里主要使用了Js自定义函数：tabMenu，函数功能：实现tab菜单，参数说明：tabMenu(tabBox,navClass);参数一：tabBox(tab容器id)参数二：navClass(当前标签样式c...
javascript 通用滑动门tab类
10-30
滑动门（Sliding Doors）技术是网页设计中一种常见的UI效果，主要应用于导航栏或标签页，通过CSS和JavaScript实现。在这个场景下，我们讨论的是一个用JavaScript编写的通用滑动门类，它可以被封装以便在不同的项目中...
使用CSS滑动门技术编写一个灵活的Tab页
IT民工的坐井观天
04-17 1246
更多： http://www.1x3x.net/blog/web-design/2008/03/css-navbar-sample.html最近在研究CSS，正好结合项目做了一个灵活的Tab页，使用纯HTML＋CSS实现，正好总结一下。首先看一下预览界面：样例HTML可以访问：http://www.demo2do.com/htmldemo/school/attendance/Attenda
CSS 实例系列 - 01 - Tab 滑动门
weixin_41806099的博客
01-12 2293
Hello 小伙伴们早上、中午、下午、晚上和深夜好，这里是 jsliang~本 CSS 系列文章：主推学以致用。结合面试题和工作实例，让小伙伴们深入体验 61 个工作常见的 CSS 属性和各种 CSS 知识。主推纯 CSS。尽可能使用 HTML + CSS 完成学习目的，但仍然有 “一小部分” 功能需要用到 JavaScript 知识，适合新人学习 + 大佬复习。如果文章在一些细节上没写清楚或者误...
css-简单滑动门
淡淡的芦苇的博客
07-25 3052
效果 鼠标滑过的时候，只在左边的时候左边处于半充满状态，在中间的时候处于全充满                                          分析： 导航用两个盒子组成：通栏+居中显示的列表项 注意：鼠标滑动的时候背景图片发生改变，但是没有切换图片的功能，我们用a和span标签分别标记左边的半圆图片和右边的，这样hover就可以改变背景了。 这里注意：每个链...
100个Tab 滑动门实例
iPhone7z的专栏
05-05 476
最近在重写一个门户网站，既然是门户网站那新闻量肯定是不小的，那如何在有限的版面内有效的显示更多的信息，jsp的滑动门形式是必不可少的   为什么不用ajax，百度说了，少用ajax。。。。。。。。   废话少说，先看图：                   其实没有多少的技术含量，算是一个集锦，方便自己以后选择样式，下载地址http://do
滑动门套滑动门css,CSS选项卡、滑动门代码
weixin_32287387的博客
08-03 174
CSS选项卡、滑动门菜单代码*{margin:0;padding:0;}body{margin:50px;font-size:12px;color:#666;}li{list-style:none;}div{width:210px;}#tab1,#tab2{width:398px;height:34px;border:1px #cfedff solid;border-bottom:0;backgr...
css滑动门的用处,css滑动门教程介绍
weixin_39849418的博客
08-03 244
css滑动门教程介绍滑动门(Sliding Doors)还是决定把滑动门单独提作一种单独的技术.它是CSS引入的一项用来创造漂亮且实用的`界面的新技术, 它使用简单, 我们只需要使用两张单独的背景图片, 就可以实现。滑动门一般用做网站Tab导航, 根据Tab中内容的长短自动缩放Tab的效果.CSS代码大致如下:#header li {float:left;background:url("left_...
html 滑动门效果,怎样用DW做滑动门的效果
weixin_39605414的博客
06-03 377
滑动门永远是新手的目标！而且单纯的DW是做不出这种效果的，必须要有javascript的！html,body{margin:0;text-align:center;over-flow:hidden;height:100%;width:100%;}UL{list-style-type:none;margin:0px;}.ctt{height:auto;clear:both;border:1pxs...
php滑动门效果,js实现简洁的TAB滑动门效果代码
weixin_30424427的博客
03-27 137
本文实例讲述了js实现简洁的TAB滑动门效果代码。分享给大家供大家参考。具体如下：这是一款滑动门代码，简洁TAB，简单的鼠标导航效果，大家或许经常见到的效果啦，鼠标放在主菜单上，下边框架内的内容会跟着变换，鼠标不需要点击，只需要滑上去就可切换内容，像一扇门，所以有时候别人叫“滑动门”菜单。运行效果如下图所示：在线演示地址如下：具体代码如下：简洁TABfunction nTabs(thisObj, ...
html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
weixin_36168927的博客
06-03 561
本文实例讲述了JS+CSS实现简单滑动门的方法。分享给大家供大家参考。具体如下：这是一款超简约设计的滑动门菜单，鼠标放到主菜单上，里面的内容会跟着变化，实际上本演示是一个范例，从代码中的注释你就能感觉到，每一步都有注释，对学习JavaScript和CSS都有帮助，也为你以后写出比这更漂亮、更实用的滑动门做铺垫。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w...
Jquery滑动门/tab切换实现方法完整示例
10-15
在本示例中，我们将探讨如何利用JQuery实现滑动门（Tab）切换效果，这是一种常见的网页设计技术，用于展示多组相关但互斥的内容。 首先，滑动门（Tab）切换效果通常由两部分组成：一个是菜单部分，即各个选项标签；...
js实现简洁的TAB滑动门效果代码
10-23
主要介绍了js实现简洁的TAB滑动门效果代码,通过简单的JavaScript自定义函数动态遍历页面元素实现tab滑动切换的功能,具有一定参考借鉴价值,需要的朋友可以参考下
UnityHub 无法添加模块问题
明明明的博客
07-10 319
UnityHub 无法添加模块问题
TikTok 入局小游戏，小游戏出海赛道大热，开发者如何抢滩海外市场？
最新发布
07-11 920
在海外市场，它的流量主要来源于个人独立站、门户网站以及内置渠道，这些平台对游戏质量都有着严格的要求，从而确保了用户体验的优质性。除此之外，《肥鹅健身房》、《寻道大千》、《三国吧兄弟》等国内现象级微信小游戏，在海外市场以APP形式发行后，也都分别获得巨额流水，这更加坚定了小游戏从业者们的出海掘金的心愿。开发者可以结合游戏进程，在“游戏关卡”、“应用界面启动“等曝光度更高的环节进行广告位设置，保障玩家体验的前提下，提升应用内广告的曝光度和转化率。在休闲、重度两个模块中，仍然有一定的规律可言。
《Unity3D高级编程 主程手记》第三章 数据表(一) 数据表的种类
仁希的博客
07-08 523
数据表完全可以认为是一个本地的数据库，只不过这个数据库里的数据是不可被修改的，是只读的。数据表是连接美术，设计策划，和程序的桥梁。
untiy 在菜单栏添加自定义按钮 点击按钮弹出一个Unity窗口，并在窗口里添加属性
吴梓穆的博客
07-10 185
"自动生成/打开生成面板"
html5滑动tab切换
06-11
HTML5 滑动 Tab 切换可以通过 CSS 和 JavaScript 实现。以下是一个简单的示例代码： HTML 代码： ``` <div class="tab-container"> <div class="tab-navigation"> <div class="tab">Tab 1 <div class="tab">Tab ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值