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 相关文章推荐
ext 同步和异步示例代码
Sep 18 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
Js 导出table内容到Excel的简单实例
Nov 19 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
js实现鼠标点击飘爱心效果
Aug 19 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
vue css 相对路径导入问题级踩坑记录
Jun 05 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实现mysql事务处理的方法
2014/12/25 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
浅谈Laravel核心解读之Console内核
2018/12/02 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
[原创]图片分页查看
2006/08/28 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
浅谈jQuery构造函数分析
2015/05/11 Javascript
javascript生成不重复的随机数
2015/07/17 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
深入理解Node.js 事件循环和回调函数
2016/11/02 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Vue.js 踩坑记之双向绑定
2018/05/03 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
微信小程序实现工作时间段选择
2019/02/15 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
python实现神经网络感知器算法
2017/12/20 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Python统计学一数据的概括性度量详解
2020/03/03 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
如何解决安装python3.6.1失败
2020/07/01 Python
Python操作Excel的学习笔记
2021/02/18 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
在什么时候需要使用"常引用"
2015/12/31 面试题
土木工程师岗位职责
2013/11/24 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
施工安全生产承诺书
2014/05/23 职场文书
检讨书范文1000字
2015/01/28 职场文书
给病人的慰问信
2015/03/23 职场文书
2015年暑期见闻
2015/07/14 职场文书
话题作文之关于呼唤
2019/11/29 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
python实现商品进销存管理系统
2022/05/30 Python