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 相关文章推荐
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
May 28 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
详解用vue.js和laravel实现微信支付
Jun 23 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue router 源码概览案例分析
Oct 09 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue-i18n结合Element-ui的配置方法
May 20 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
AJAX的跨域访问-两种有效的解决方法介绍
2013/06/22 PHP
php增删改查示例自己写的demo
2013/09/04 PHP
PHP图片上传代码
2013/11/04 PHP
php配合jquery实现增删操作具体实例
2013/12/12 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JavaScript 反科里化 this [译]
2012/09/20 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
Vue项目安装插件并保存
2019/01/28 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
python 打印对象的所有属性值的方法
2016/09/11 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
python flask中静态文件的管理方法
2018/03/20 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python UnboundLocalError和NameError错误根源案例解析
2018/10/31 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
python和php学习哪个更有发展
2020/06/17 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
通往英国高街的商店橱窗:Down Your High Street
2020/07/19 全球购物
编写strcpy函数
2014/06/24 面试题
个人主要事迹材料
2014/08/26 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
西安兵马俑导游词
2015/02/02 职场文书
鲁冰花观后感
2015/06/10 职场文书
财务年终工作总结大全
2019/06/20 职场文书
mysql sock 文件解析及作用讲解
2022/07/15 MySQL