欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

JavaScript Tab菜单实现过程解析

时间:2020-05-22|栏目:JavaScript|点击:

Tab 选项卡切换效果在现如今的网页中,运用的也是比较多的,包括点击切换、滑动切换、延迟切换、自动切换等多种效果

代码如下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{ margin: 0px; padding: 0px; } .current{ background-color: darkgray; color: yellow; width: 50px; height: 30px; line-height: 30px; float: left; } .top{ float: left; width: 50px; height: 30px; line-height: 30px; } #topMenu{ width: 400px; height: 30px; background-color: aquamarine; margin-left: 400px; float: left; } #bottomMenu{ clear: both; float: left; width: 400px; height: 400px; margin-left: 400px; background-color: chocolate; } .hide{ display: none; } .current-content{ color: blue; font-size: 50px; } </style> <script src="http://www.zhano.cn/uploads/allimg/200522/13534115Z-0.jpg"></script> </head> <body> <div> <div xxx="c1">menu1</div> <div xxx="c2">menu2</div> <div xxx="c3">menu3</div> </div> <div> <div>content1</div> <div>content2</div> <div>content3</div> </div> <script> function tab(self){ $(self).addClass("current"); $(self).siblings().removeClass("current"); var s=$(self).attr("xxx"); $("#"+s).removeClass("hide"); $("#"+s).addClass("current-content"); $("#"+s).siblings().addClass("hide"); $("#"+s).siblings().removeClass("current-content"); } </script> </body> </html>

程序的运行效果如下:鼠标点击Tab标签,实现标签变色效果,下边的内容变成相应的标签内容.

JavaScript Tab菜单实现过程解析

上一篇:JS原形与原型链深入详解

栏    目:JavaScript

下一篇:JavaScript 正则应用详解【模式、欲查、反向引用等

本文标题:JavaScript Tab菜单实现过程解析

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1400.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7