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 相关文章推荐
原生javaScript做得动态表格(注释写的很清楚)
Dec 29 Javascript
原生js实现移动开发轮播图、相册滑动特效
Apr 17 Javascript
jQuery中$.extend()用法实例
Jun 24 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
利用js定义一个导航条菜单
Mar 14 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
layui table去掉右侧滑动条的实现方法
Sep 05 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
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
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
Google韩国首页图标动画效果
2007/08/26 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
2013/07/04 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
jquery div拖动效果示例代码
2013/12/08 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
js继承实现方法详解
2016/12/16 Javascript
js实现二级导航功能
2017/03/03 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
用js屏蔽被http劫持的浮动广告实现方法
2017/08/10 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
使用javascript做时间倒数读秒功能的实例
2019/01/23 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
JS字符串补全方法padStart()和padEnd()
2020/05/27 Javascript
[43:33]EG vs Spirit Supermajor 败者组 BO3 第一场 6.4
2018/06/05 DOTA
使用Python的Tornado框架实现一个简单的WebQQ机器人
2015/04/24 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
CSS3实现同时执行倾斜和旋转的动画效果
2016/10/27 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
关于青春的演讲稿500字
2014/08/22 职场文书
党员十八大心得体会
2014/09/12 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
Python基本的内置数据类型及使用方法
2022/04/13 Python