<!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. Qt之qInstallMessageHandler（重定向至文件）

    简述 在Qt之qInstallMessageHandler(输出详细日志)一节中,我们讲解了如何使用自定义消息处理程序输出调试信息,而且可以很直观.很方便的得到输出代码所在的文件.函数.行号等信息. ...

  2. Mysql使用mysqldump按时间导出时的一个注意事项

    在使用Mysql的mysqldump命令按时间进行数据导出时,我们可能会遇到导出数据与原库中不符或者导出数据和我们期望的数据不同的情况. 我们知道Mysql数据库导出可以使用命令mysqldump,使 ...

  3. VMware卸载出现“the msi failed”解决办法

    最近被VMware卸载搞烦死掉,最后通过这个帖子解决. http://www.cnblogs.com/noble/p/4144267.html 总结:有啥软件使用问题最好找官方的FAQ找答案,不然百度 ...

  4. ✡ leetcode 173. Binary Search Tree Iterator 设计迭代器（搜索树）--------- java

    Implement an iterator over a binary search tree (BST). Your iterator will be initialized with the ro ...

  5. WaitForMultipleObjects返回失败原因之一

    上网搜了下 关于 WaitForMultipleObjects等待多个线程退出的状态失败的情况,也有人遇到类似的情况. 一次项目中我也遇到这么个情况.项目中创建线程都是用的  _beginthread ...

  6. jsp静态、动态引入其他jsp

    1. <%@ include file="page.jsp"%> /*静态引入,内容必须写成固定值*/    在servlet容器转化jsp为servlet时,将引入的 ...

  7. Date 对象中的 getYear 和 getFullYear方法

    生成一个新的日期对象 : var someDate=new Date(); 获取日期月份中的天数: var date=someDate.getDate(); 获取 4 位数的年份: var year= ...

  8. 表单和 HTML 辅助方法– ASP.NET MVC 4 系列

           这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...

  9. Linq to Entity经验：表达式转换

    http://www.cnblogs.com/ASPNET2008/archive/2012/10/27/2742434.html 最近一年的项目,我主要负责一些小型项目(就是指企业内部的小项目),在 ...

  10. CentOS以及Oracle数据库发展历史及各版本新功能介绍, 便于构造环境时有个对应关系

    CentOS版本历史 版本 CentOS版本号有两个部分,一个主要版本和一个次要版本,主要和次要版本号分别对应于RHEL的主要版本与更新包,CentOS采取从RHEL的源代码包来构建.例如CentOS ...