JavaScript实现网页tab栏效果制作


Posted in Javascript onNovember 20, 2020

JS网页?tab栏制作,供大家参考,具体内容如下

在网页的制作中,通常会使用到tab栏,例如淘宝,商品详情,规格参数和累计评价三个栏,点击不同的栏下面出现的内容不同。在这样的设计中,JS可以做到。

JavaScript实现网页tab栏效果制作

根据淘宝做出默认状态下为商品介绍栏以及对应的文字,鼠标点击其他栏目,点击的栏目背景颜色变红,同时下面的栏目出现点击栏目的解释。

JavaScript实现网页tab栏效果制作

程序源码:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>tab栏切换操作</title>

 <style>
  * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
  }
  .tab {
   margin: 100px auto;
   width: 1200px;
   height: 330px;
   background-color: royalblue;
  }
  .tab .tab_list {
   height: 30px;
   background-color: slategrey;
  }
  .tab ul li{
   float: left;
   list-style: none;
   cursor: pointer;
   width: 100px;
   height: 30px;
  }
  .color {
   background-color: red;
  }
  .tab .tab_con {
   height: 300px;
   background-color: silver;
  }
 </style>
</head>
<body>
 <div class = "tab">
  <div class="tab_list">
   <ul>
    <li class = "color">商品介绍</li>
    <li>规格与包装</li>
    <li>售后保障</li>
    <li>商品评价</li>
    <li>手机社区</li>
   </ul>
  </div>
  <div class="tab_con">
   <div class="item" style="display:block;">商品介绍</div>
   <div class="item" style="display: none;">规格与包装</div>
   <div class="item" style="display: none;">售后保障</div>
   <div class="item" style="display: none;">商品评价</div>
   <div class="item" style="display: none;">手机社区</div>

  </div>
 </div>

 <script>
  var tab_list = document.querySelector('.tab_list');
  var lis = tab_list.querySelectorAll('li');
  var items = document.querySelectorAll('.item');
  for(var i = 0;i<lis.length;i++){
   //给所有的li添加自定义属性索引号
   lis[i].setAttribute('index',i)
   //设置鼠标点击事件
   lis[i].onclick = function(){
    for( var i = 0;i<lis.length;i++){
     //将所有类的类名设置为空
     lis[i].className='';
     //将所有的display设置为none
     items[i].style.display='none';
    }
    //给点击事件的类名设置为color
    this.className='color';
    //获取点击事件的索引号
    var index = this.getAttribute('index');
    // for (var i=0;i<items.length;i++){
    //  items[i].style.display='none';
    // }
    //将点击事件的display设置为block
    items[index].style.display = 'block';
   }
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
在线一元二次方程计算器实例(方程计算器在线计算)
Dec 22 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
JavaScript仿支付宝6位数字密码输入框
Dec 29 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
Feb 03 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
原生js实现弹窗消息动画
Nov 20 #Javascript
js实现限定区域范围拖拉拽效果
Nov 20 #Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 #Javascript
JavaScript 异步时序问题
Nov 20 #Javascript
JavaScript实现音乐导航效果
Nov 19 #Javascript
You might like
PHP的FTP学习(一)[转自奥索]
2006/10/09 PHP
PHP 开源框架22个简单简介
2009/08/24 PHP
PHP写杨辉三角实例代码
2011/07/17 PHP
php网站地图生成类示例
2014/01/13 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
2017/05/19 jQuery
JS中去掉array中重复元素的方法
2017/05/26 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[52:26]完美世界DOTA2联赛决赛 FTD vs Phoenix 第一场 11.08
2020/11/11 DOTA
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python数据结构之翻转链表
2017/02/25 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
如何在pycharm中安装第三方包
2020/10/27 Python
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
自我鉴定200字
2013/10/28 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
个人收入证明范本
2014/01/12 职场文书
公司会计岗位职责
2014/02/13 职场文书
保证书格式范文
2014/04/28 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
thinkphp 获取控制器及控制器方法
2021/04/16 PHP
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS