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.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
用循环或if语句从json中取数据示例
Aug 18 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
Jan 28 Javascript
node.js实现爬虫教程
Aug 25 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 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
libmysql.dll与php.ini是否真的要拷贝到c:\windows目录下呢
2010/03/15 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
input 高级限制级用法
2009/03/26 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JS高级技巧(简洁版)
2018/07/29 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
Python + selenium自动化环境搭建的完整步骤
2018/05/19 Python
Python实现手写一个类似django的web框架示例
2018/07/20 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
python交易记录链的实现过程详解
2019/07/03 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
如何解决安装python3.6.1失败
2020/07/01 Python
HTML5新增的表单元素和属性实例解析
2014/07/07 HTML / CSS
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
社区巾帼文明岗事迹材料
2014/06/03 职场文书
2014国庆节商场促销活动策划方案
2014/09/16 职场文书
医院领导班子整改方案
2014/10/01 职场文书
2014年政府采购工作总结
2014/12/09 职场文书
皇城相府导游词
2015/02/06 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
离职证明格式样本
2015/06/12 职场文书
python游戏开发Pygame框架
2022/04/22 Python