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 相关文章推荐
几款极品的javascript压缩混淆工具
May 16 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 Javascript
Javascript 面向对象特性
Dec 28 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JS常用正则表达式总结
Nov 12 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JavaScript实现异步图像上传功能
Jul 12 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
微信小程序实现上传图片裁剪图片过程解析
Aug 22 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实现的增强性mhash函数
2015/05/27 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
PHP数据库处理封装类实例
2016/12/24 PHP
PHP的中使用非缓冲模式查询数据库的方法
2017/02/05 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
2016/06/22 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
微信小程序框架的页面布局代码
2019/08/17 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
Python reduce()函数的用法小结
2017/11/15 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
使用CSS禁止textarea调整大小功能的方法
2015/03/13 HTML / CSS
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
《孔子拜师》教学反思
2014/02/24 职场文书
社区综治工作汇报
2014/10/27 职场文书
暑期实践个人总结
2015/03/06 职场文书