<!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. track by

    ng-repeat指令中使用track by子语句解决重复数据遍历的错误 <li ng-repat="x in [2, 2]" ng-bind="x"&g ...

  2. xss跨站脚本测试

    测试的时候会涉及到xss测试,下面简要整理下xss的知识 xss跨站脚本特点就是能注入恶意的HTML/JS代码到用户浏览器,劫持用户会话 常用alert来验证网站存在漏洞 如果确认存在漏洞,会随着注入 ...

  3. linux awk的使用

    awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...

  4. JDBC连接数据库(PreparedStatement)

    PreparedStatement是在数据库端防止SQL注入漏洞的SQL方法这里演示了一些基本使用方法同样使用Oracle数据库,之前已经手动建立了一张t_account表数据库代码参见上一篇< ...

  5. Oracle数据类型隐式转换小析

    测试使用环境:oracle 11g r1 平常写sql语句时,大大咧咧,不太注意和数字有关的数据类型,有时例如 where c1=111 和 where c1='111'这样混用,却不曾想这里面另有蹊 ...

  6. ViewStub的简单用法和说明

    最近无意间知道了ViewStub,所以特地的去了解了一下 都知道ViewStub是一个不可见的,大小为0的View,实际上跟include差不多,但是ViewStub要更加节约资源.被称为是" ...

  7. jquery/js分割数组

    substr(star[,length]);//star起始位置 length截取的长度 substring(star,end);//star起始位置,end结束位置 都是以0开始的索引值

  8. Axis2使war包发布为WebService

    首先 吐槽下 Axis2的Eclipse插件.不好用,而且局限性大.并且添加包的过程...会及其痛苦.(懂的自然懂) 而且 发布的aar文件,不能解压缩重新打包再压缩...尝试过添加 jar包,但报错 ...

  9. 《C标准库》——之<string.h>

    <string.h>里的字符串操作函数是经常要用到的,因此阅读了源码后自己实现了一些: 拷贝函数 void * Mymemcpy(void * sDst, const void * sSr ...

  10. oracle数据迁移、备份等

    exp db  或者数据泵. 或者ETL工具