1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         * {
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         ul {
  15.             list-style: none;
  16.         }
  17.  
  18.         /* 控制其显示和隐藏 */
  19.         .show {
  20.             display: block !important;
  21.         }
  22.  
  23.         .header {
  24.             overflow: hidden;
  25.             height: 25px;
  26.             width: 100%;
  27.             height: 25px;
  28.             line-height: 25px;
  29.             padding-bottom: 1px;
  30.         }
  31.  
  32.         .header-tab {
  33.             width: 100%;
  34.             display: flex;
  35.             overflow: hidden;
  36.             white-space: nowrap;
  37.             overflow-x: scroll;
  38.             background-color: pink;
  39.             white-space: nowrap;
  40.             font-size: 15px;
  41.         }
  42.  
  43.         .header-tab li {
  44.             cursor: pointer;
  45.             margin-left: 6px;
  46.         }
  47.  
  48.         .wrapper {
  49.             height: 600px;
  50.             width: 100%;
  51.             margin: 0 auto;
  52.         }
  53.  
  54.         /* 其子元素为隐藏状态 */
  55.         .wrapper>div {
  56.             display: none;
  57.         }
  58.  
  59.         /* 隐藏滚动条 */
  60.         .header-tab::-webkit-scrollbar {
  61.             display: none
  62.         }
  63.  
  64.         /* 添加下划线 */
  65.         .add2line {
  66.             color: #3385ff;
  67.             border-bottom: 1px solid #3385ff;
  68.         }
  69.     </style>
  70. </head>
  71.  
  72. <body>
  73.     <nav class="header">
  74.         <ul class="header-tab" id="box">
  75.             <li class="add2line">更新内容</li>
  76.             <li>关注</li>
  77.             <li>热点</li>
  78.             <li>要闻</li>
  79.             <li>我的生活</li>
  80.             <li>国际新闻</li>
  81.             <li>态度公开课</li>
  82.             <li>新时代</li>
  83.             <li>抖音视频</li>
  84.         </ul>
  85.     </nav>
  86.     <main class="wrapper">
  87.         <div class="show content">
  88.             页面1
  89.         </div>
  90.         <div class="content">
  91.             页面2
  92.         </div>
  93.         </div>
  94.         <div class="content">
  95.             页面3
  96.         </div>
  97.         <div class="content">
  98.             页面4
  99.         </div>
  100.         <div class="content">
  101.             页面5
  102.         </div>
  103.         <div class="content">
  104.             页面6
  105.         </div>
  106.         <div class="content">
  107.             页面7
  108.         </div>
  109.         <div class="content">
  110.             页面8
  111.         </div>
  112.         <div class="content">
  113.             页面9
  114.         </div>
  115.     </main>
  116. </body>
  117.  
  118. </html>
  119. <script>
  120.     window.onload = function () {
  121.         var doc = document
  122.         isShow()
  123.         function isShow() {
  124.             var liArr = doc.querySelectorAll('#box > li')
  125.             var divArr = doc.querySelectorAll('.wrapper .content')
  126.             for (var i = 0; i < liArr.length; i++) {
  127.                 liArr[i].index = i;
  128.                 liArr[i].onclick = function () {
  129.                     for (var j = 0; j < liArr.length; j++) {
  130.                         liArr[j].className = ''
  131.                         divArr[j].className = ''
  132.                     }
  133.                     divArr[this.index].className = 'show'
  134.                     liArr[this.index].className = 'add2line'
  135.                 }
  136.             }
  137.         }
  138.         // 当前视窗的宽度
  139.         var WINDOW_OFFSETWIDTH = doc.documentElement.clientWidth
  140.         var liArr = doc.querySelectorAll('#box > li')
  141.         for (var i = 0; i < liArr.length; i++) {
  142.             liArr[i].addEventListener('click', function (e) {
  143.                 // 获取当前点击元素的宽度
  144.                 var itemWidth = this.offsetWidth
  145.                 // 当前事件对象相对移动的距离
  146.                 var moveX = e.target.offsetLeft
  147.                 // 目标居中的距离 = (当前元素距离左边的相对距离 / 2)+ (视口距离 / 2)
  148.                 var left = moveX - (WINDOW_OFFSETWIDTH / 2) + (itemWidth / 2)
  149.                 doc.getElementById('box').scrollLeft = left
  150.             })
  151.         }
  152.     }
  153. </script>

js滑动导航栏点击后居中效果的更多相关文章

  1. ViewPager+GridView实现首页导航栏布局分页效果

    如图是效果图用ViewPager+GridView实现首页导航栏布局分页效果来实现的效果 Demo下载地址:http://download.csdn.net/detail/qq_29774291/96 ...

  2. Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）

    Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...

  3. JS面向对象方法（一）： 使用原生JS 实现导航栏下多级分类弹出效果

    利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li ...

  4. mpvue实战-手势滑动导航栏

    写点东西记录一下美好时光,上周学习了一下通过mpuve开发微信小程序,看完文档,就准备撸起袖子加油干的时候,一开始就被支持手势滑动的导航栏给搞懵逼了.求助一波百度和谷歌未果后,只能自己动脑动手!为了给 ...

  5. 在UWP中页面滑动导航栏置顶

    最近在研究掌上英雄联盟,主要是用来给自己看新闻,顺便copy个界面改一下段位装装逼,可是在我copy的时候发现这个东西 当你滑动到一定距离的时候导航栏会置顶不动,这个特性在微博和淘宝都有,我看了@ms ...

  6. Bootstrap，导航栏点击效果修复（补）

    前言: 昨天晚上休息,忘记发博客了.对于学习这件是,还是需要坚持的.想想自建一个Jekyll博客模版还是很兴奋的,话不多说,看正文吧! 关于开发:  先看个Demo吧,点这里.你会发现,点击是没有效果 ...

  7. js实现导航栏的吸顶操作

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  8. js动态控制导航栏样式

    导航栏一般做为母版页,为了使增加用户体验,往往在用户进入某个页面给予导航栏相应的样式,这里可以用js动态添加 <div class="box_left fl"> < ...

  9. 原生js实现导航栏吸顶

    实现滑动滚动条让导航栏吸顶原理:主要是通过监听scroll,设定一个滚动条垂直位移作为临界,让导航栏吸顶或者取消吸顶. 话不多说了,代码如下: window.onscroll = function ( ...

随机推荐

  1. D-query SPOJ - DQUERY 主席树查询区间内不同数出现的次数

    我们不以权值建立主席树,而是区间端点作为值建立线段树,一个个插入a[i],我们发现这个数之前是存在的,就需要在上个版本的主席树上减去原来的位置,并加上现在的位置,这样我们在i版本的主席树,维护1-r中 ...

  2. 2018-8-10-UWP-WPF-解决-xaml-设计显示异常

    title author date CreateTime categories UWP WPF 解决 xaml 设计显示异常 lindexi 2018-08-10 19:16:53 +0800 201 ...

  3. Laravel引入第三方库的方法

    https://blog.csdn.net/will5451/article/details/52472695 1.首先在app目录下创建一个新的文件夹,命名libs(可自定义) 2.(可选)考虑到后 ...

  4. 洛谷P2590 [ZJOI2008]树的统计 题解 树链剖分+线段树

    题目链接:https://www.luogu.org/problem/P2590 树链剖分模板题. 剖分过程要用到如下7个值: fa[u]:u的父节点编号: dep[u]:u的深度: size[u]: ...

  5. TSLint-Angular 配置

    代码风格和语义的检查工具,帮助规范 TS 和 Angular 代码书写: 安装: => cnpm install // 安装相关依赖 全局安装 cnpm install -g tslint ty ...

  6. Python--day36--操作系统的作用；多道技术；

  7. 分布式全局唯一ID

    方案一.UUID UUID的方式能生成一串唯一随机32位长度数据,它是无序的一串数据,按照开放软件基金会(OSF)制定的标准计算,UUID的生成用到了以太网卡地址.纳秒级时间.芯片ID码和许多可能的数 ...

  8. tensorflow在文本处理中的使用——TF-IDF算法

    代码来源于:tensorflow机器学习实战指南(曾益强 译,2017年9月)——第七章:自然语言处理 代码地址:https://github.com/nfmcclure/tensorflow-coo ...

  9. 【GYM102091】2018-2019 ACM-ICPC, Asia Nakhon Pathom Regional Contest

    A-Evolution Game 题目大意:有$n$个不同的野兽,定义第$i$ 个野兽有 $i$ 个眼睛和 $h[i]$ 个角,你可以任意从中选择一个野兽进行进化,每次进化角数量必须增加,而且进化后要 ...

  10. Common Logging包装设计

    类设计 LogFactory根据当前环境加载具体的Log实现: 1.从缓存中加载LogFactory 2.从系统属性org.apache.commons.logging.LogFactory 中加载L ...