<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>JS滑动</title>
<style>
*{padding:0;margin:0;}
.tagBox{border:1px solid #ddd; margin:50px auto;width:700px;height:239px}
.tagNav {height:30px; border-bottom:1px solid #ddd; background:#f5f5f5;}
.tagNav li {float:left;height:30px; line-height:30px; list-style:none; padding:0 15px;}
.tagNav li.curTag { background:#fff; margin-bottom:-1px; position: relative; height:31px; border-left:1px solid #ddd; border-right:1px solid #ddd;}
.tagNav li:first-child.curTag{ border-left:none}
.tagCon { padding:10px;}
.tagCon div{ display:none}
.tagCon div.curTag {display: block}
</style>
</head>
<body>

<div class="tagBox">
<div class="tagNav" id="one">
<ul>
<li class="curTag" id="one1" onMouseMove="showTag('one',1)">A</li>
<li id="one2" onMouseMove="showTag('one',2)">B</li>
<li id="one3" onMouseOver="showTag('one',3)">C</li>
<li id="one4" onMouseOver="showTag('one',4)">D</li>
<li id="one5" onMouseOver="showTag('one',5)">E</li>
<li id="one6" onMouseOver="showTag('one',6)">E</li>
</ul>
</div>
<div class="tagCon">
<div class="curTag" id="oneCon1">AAA</div>
<div id="oneCon2">BBB</div>
<div id="oneCon3">CCC</div>
<div id="oneCon4">DDD</div>
<div id="oneCon5">EEE</div>
<div id="oneCon6">FFF</div>
</div>
</div>

<script>
function showTag(name,cur){
var n=document.getElementById(name).getElementsByTagName("li").length; //li 根据上面的tagNav中的tag来变化
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById(name+"Con"+i);
menu.className=i==cur?"curTag":""; 
con.style.display=i==cur?"block":"none";
}}
</script>
</body>
</html>

//curTag用来控制样式 例如 .tagNav li.curTag { background: url(1.jpg) no-repeat; margin-bottom:-1px; position: relative; height:31px; border-left:1px solid #ddd; border-right:1px solid #ddd;}  可以定义鼠标在上面是显示的背景，字体的样式等。

.tagNav li.curTag a{color: #fff;} 可以设置鼠标在上面时字体显示白色。

JS滑动的更多相关文章

  1. iSlider手机平台JS滑动组件

    iSlider手机平台JS滑动组件,无任何插件依赖.它能够处理任何元素,例如图片或者DOM元素.它有如下特性:能够自定义动画,自带的动画包括default, rotate, flip 和 depth你 ...

  2. appium java 滑动（js滑动和swipe滑动）

    最近有一个页面的内容很多,有的元素需要滑动到底部才能看到,所以就研究一下滑动,下面是我学习到的两种滑动方式 一:用js滑动 用js滑动的思路是很简单,首先是先定位到这个元素,定位到之后不做任何操作,然 ...

  3. Swipe JS滑动插件

    Swipe JS 是一个轻量级的移动滑动组件,支持 1:1 的触摸移动,阻力以及防滑性能都不错,可以让移动web应用展现更多的内容,能解决我们对于移动Web对滑动的需求. 官网:http://www. ...

  4. js 滑动门的实现

    原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...

  5. JS滑动下划线导航菜单实现原理

    效果如下:http://campus.51job.com/test/zengxl/js html: <div class="mainnav"> <div clas ...

  6. js滑动提示效果

    js代码 漂亮的动画效果:在靠右上角:背景颜色为红,字体颜色为白色  滑动 变大 上移  缓慢渐变消失 function tishi() { $("#tishi").attr(&q ...

  7. ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换

    ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed=&quo ...

  8. [Js]滑动门效果

    描述:鼠标移动到一副图片上,会显示该副图片的全貌,而其他图片会显示概貌 一.没有动画效果的运动 思路: 1.定好每张图片的初始位置(第一张完全显示,234只露出一部分) 2.计算每道门的移动距离(即未 ...

  9. JS滑动门,JQuery滑动门

    <a href="#" id="one1" onmouseover="setTab('one',1,2)" class="h ...

随机推荐

  1. 在同台电脑上再次安装MySql需要注意的事项

    今天安装了一下mysql,出现的问题主要是在最后一步: msyql 安装到最后一步 start service 错误解决方法 1, 到控制面板里面先把 mysql 删除 . 2. 到 c 盘 C:\P ...

  2. The Swift Programming Language 中文翻译版（个人翻新随时跟新）

    The Swift Programming Language --lkvt 本人在2014年6月3日(北京时间)凌晨起来通过网络观看2014年WWDC 苹果公司的发布会有iOS8以及OS X 10.1 ...

  3. 如何制作快速加载的HTML页面

    整理出来的tip 减小页面的大小 在页面下载中,页面的大小至今扮演着非常重要的因素. 减小页面的大小能够通过排除不必要空格,注释,动态内嵌脚本,和放入外部文件的 CSS 等在页面结构中很小的改变都能够 ...

  4. 内省(introspector)------>JavaBean

    内省(introspector)------>JavaBean    1.问什么要学内省?        开发框架时,经常需要Java对象的属性来来封装程序的数据,每次使用反射技术完成此操作过于 ...

  5. 初识Java-分数录入系统

    package classTest; import java.util.Scanner; public class scoreArrangement { /**  * 选择界面(main)  */ p ...

  6. 9本java程序员必读的书（附下载地址）

    本文列出的9本书在Java程序员界都是被认为很棒的书.当一个程序员开始初学Java时,他的第一个问题应该是如何选择一本书来作为指导学习Java.这个问题也就表明,相对于其他的教程和博客,Java书籍还 ...

  7. [转]linux,windows 可执行文件(ELF、PE)

    ELF (Executable Linkable Format)UNIX类操作系统中普遍采用的目标文件格式 . 首先要知道它有什么作用:工具接口标准委员会TIS已经将ELF作为运行在Intel32位架 ...

  8. c++句柄设计

    句柄,也称为智能指针. 我计算了一下我的时间,以后每14天得读完一本书,才不愧对我买的这么多书.然而我还要抽出时间来谢谢博文.最近读的是c++沉思录,开篇就用了3章来讲述句柄.好了,废话少说,接下来谈 ...

  9. 多系统PE win UBUNTU OSX

    WIN8 PE来自黑果圈中著名的地平线大神- 内置wim安装工具.EFI修复工具 OSX PE来自 FireWolf OS X PE V7.0 UBUNTU 直接安装盘就能当PE用 需要一个FAT32 ...

  10. VIM常用快捷键

    光标前插入i,行首插入 拷贝当前行 yy或者Y 删除一行dd,删除后进入插入模式cc或者S 粘贴p 撤销u,重做ctrl + r 删除一行dd,删除后进入插入模式cc或者S