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获取隐藏dom的宽高 具体实现
Jul 14 Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
javascript实现点击按钮切换轮播图功能
Sep 23 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的38部超级英雄动画电影
2020/03/03 欧美动漫
PHP教程 预定义变量
2009/10/23 PHP
PHP编码转换
2012/11/05 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
教你识别简单的免查杀PHP后门
2015/09/13 PHP
js 调整select 位置的函数
2008/02/21 Javascript
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
2016/05/26 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
js实现时钟定时器
2020/03/26 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
matplotlib实现热成像图colorbar和极坐标图的方法
2018/12/13 Python
Python3.6实现根据电影名称(支持电视剧名称),获取下载链接的方法
2019/08/26 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
西安众合通用.net笔试题
2013/03/18 面试题
安全生产管理责任书
2014/04/16 职场文书
母亲节感言
2015/08/03 职场文书
运动会广播稿300字
2015/08/19 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL
如何用JS实现网页瀑布流布局
2021/04/24 Javascript