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插件 easyUI属性汇总
Jan 19 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
Dec 20 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
Sep 05 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
基于canvas实现的绚丽圆圈效果完整实例
Jan 26 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
走进AngularJs之过滤器(filter)详解
Feb 17 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
微信小程序实现点击生成随机验证码
Sep 09 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
php5.2.0内存管理改进
2007/01/22 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
PHP数组函数知识汇总
2016/05/12 PHP
Smarty3配置及入门语法
2017/02/22 PHP
yii2 commands模式以及配置crontab定时任务的方法
2017/08/19 PHP
HTML Color Picker(js拾色器效果)
2013/08/27 Javascript
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JS控件bootstrap suggest plugin使用方法详解
2017/03/25 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
vue-cli 自定义指令directive 添加验证滑块示例
2017/10/19 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
Python第三方库的安装方法总结
2016/06/06 Python
python实现验证码识别功能
2018/06/07 Python
python3字符串操作总结
2019/07/24 Python
python 3.74 运行import numpy as np 报错lib\site-packages\numpy\__init__.py
2019/10/06 Python
java字符串格式化输出实例讲解
2021/01/06 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
Shein英国:女性时尚网上商店
2019/04/10 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
校长寄语大全
2014/04/09 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
求职自我评价参考范文
2019/05/16 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL
Android中的Launch Mode详情
2022/06/05 Java/Android