JavaScript Tab菜单实现过程解析


Posted in Javascript onMay 13, 2020

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://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="topMenu">
  <div xxx="c1" class="top current" onclick="tab(this)">menu1</div>
  <div xxx="c2" class="top" onclick="tab(this)">menu2</div>
  <div xxx="c3" class="top" 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标签,实现标签变色效果,下边的内容变成相应的标签内容.

JavaScript Tab菜单实现过程解析

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
jQuery选择器之基本选择器与层次选择器
Mar 03 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
Vue如何清空对象
Mar 03 Vue.js
JS高级程序设计之class继承重点详解
Jul 07 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
element中el-container容器与div布局区分详解
May 13 #Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 #Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 #Javascript
Node 模块原理与用法详解
May 13 #Javascript
JavaScript oncopy事件用法实例解析
May 13 #Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 #Javascript
You might like
Drupal读取Excel并导入数据库实例
2014/03/02 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript与CSS复习(二)
2010/06/29 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
JS比较两个数值的大小实例
2016/11/25 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
前端深入理解Typescript泛型概念
2020/03/09 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
numpy找出array中的最大值,最小值实例
2018/04/03 Python
Python网络编程使用select实现socket全双工异步通信功能示例
2018/04/09 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
TensorFlow Session使用的两种方法小结
2018/07/30 Python
一看就懂得Python的math模块
2018/10/21 Python
python将.ppm格式图片转换成.jpg格式文件的方法
2018/10/27 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
pytorch 共享参数的示例
2019/08/17 Python
Python3 tkinter 实现文件读取及保存功能
2019/09/12 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
银行财务部实习生的自我鉴定
2013/11/27 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
目标责任书范本
2014/04/16 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python