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 取值、赋值的基本方法整理
Mar 31 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
jQuery获得子元素个数的方法
Apr 14 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
jquery+html仿翻页相册功能
Dec 20 Javascript
JS实现异步上传压缩图片
Apr 22 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
JS script脚本中async和defer区别详解
Jun 24 Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 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
如何使用PHP中的字符串函数
2006/10/09 PHP
php多种形式发送邮件(mail qmail邮件系统 phpmailer类)
2014/01/22 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
js 创建书签小工具之理论
2011/02/25 Javascript
js操作iframe兼容各种主流浏览器示例代码
2013/07/22 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
对于js垃圾回收机制的理解
2017/09/14 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Python 从相对路径下import的方法
2018/12/04 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
Python 根据日志级别打印不同颜色的日志的方法示例
2019/08/08 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python3.7安装keras和TensorFlow的教程图解
2020/06/18 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法
2016/07/08 HTML / CSS
多视角3D逼真HTML5水波动画
2016/03/03 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
化工机械应届生求职信
2013/11/04 职场文书
西式婚礼证婚词
2014/01/12 职场文书
公司联欢会策划方案
2014/05/19 职场文书
2015年女工委工作总结
2015/07/27 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android