JavaScript Tab菜单实现过程解析
网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要介绍了JavaScript Tab菜单实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
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; } .{ float: left; width: 50px; height: 30px; line-height: 30px; } #Menu{ 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://code.jquery./jquery-3.3.1.min.js"></script> </head> <body> <div id="Menu"> <div xxx="c1" class=" current" onclick="tab(this)">menu1</div> <div xxx="c2" class="" onclick="tab(this)">menu2</div> <div xxx="c3" class="" onclick="tab(this)">menu3</div> </div> <div id="bottomMenu"> <div id="c1" class="current-content">content1</div> <div id="c2" class="hide">content2</div> <div id="c3" class="hide">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标签,实现标签变色效果,下边的内容变成相应的标签内容.
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:原生JS实现汇率转换功能代码实例
下一篇:JQuery事件冒泡和默认行为代码实例
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程