<!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. 项目里的jquery.min.js错误

    项目里的jquery.min.js报一系列 - Missing semicolon - Missing semicolon - Missing semicolon - Missing semicolo ...

  2. SQL if exists database总是出现语法错误

    SQL if exists总是出现语法错误.望高手纠正._百度知道 http://zhidao.baidu.com/link?url=7VyzcX0V1A3lhBQ1emNt2sTk7QGDuijOq ...

  3. ICA和PCA

    http://wenku.baidu.com/link?url=BsmIM7T4CU1D_MgiBzu4Ul1oLnM2Qpmc0sCfXIcD9S20qq3BEkSnuY4RUc7gDZoeFR1N ...

  4. Mercurial笔记（hg命令）

    两个站点: http://z42.readthedocs.org/zh/latest/devtools/hg.html http://bucunzai.net/hginit/ 添加用户名 在.hg目录 ...

  5. linux和windows共享文件

    开发板的文档上说可以使用nfs共享文件夹,提供的命令如下: mount –t nfs –o nolock 192.168.1.244:/usr/ /mnt/ 因此我在我的win10上设了共享文件夹,然 ...

  6. JSP-JSTL学习

    <%@page import="com.Student"%> <%@page import="com.Person"%> <%@p ...

  7. 在ubuntu 14.04 64位添加32位库

    网上查了好多,结果发现这个是有用的,做个标记 sudo apt-get install libgtk2.0-0:i386

  8. jQuery中$.fn的用法示例介绍

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下 如扩展$.fn.abc(),即$.fn.abc()是对jquery ...

  9. 使用jquery、ajax不刷新页面打印表格（返回数据类型text、json）；

    效果图: 一:返回数据是text时 1.表单代码: <body> <form action="#" method="post"> 姓名: ...

  10. linux用户和用户组的基本操作

    1.用户组操作 -创建用户组 # groupadd 组名 说明:新创建的组id默认从500开始,也可以通过[-g]选项指定组id,指定组id后新创建的组id会从指定的id后依次创建. -删除用户组 # ...