css 动态导航栏
上一周遇到几个小问题，其中一个是关于动态导航栏的问题，在这里写出来。
动态导航栏的效果是，默认显示第一个li标签的下划线效果，然后点击其它li标签只显示当前自己li标签的下划线效果，看起来是很简单的一个问题，里面还是包含了不少细节。
- 首先ul标签的子标签 li 的显示效果有如下几种
none不使用项目符号 disc实心圆，默认值 circle空心圆 square实心方块 decimal阿拉伯数字 lower-roman小写罗马数字 upper-roman大写罗马数字 lower-alpha小写英文字母 upper-alpha大写英文字母 去掉li标签的默认小圆点，将ul标签的list-style-type属性设置为none
- 如何实现超出的li标签数组滑动效果?
这里可以用flex布局解决这个问题，重点是设置overflow-x:auto;flex-shrink:0;将x方向的溢出设置为自动，将缩小比例设置为 0，即是不缩小。具体如下
设置li标签的父标签ul 的布局为 flex 并设置 flex的overflow-x:auto;
但是这样是不能实现滑动效果的，为什么？原因是当前设置了width：100%；如果当前li标签数组太长(大于界面显示宽度)，li标签的长度(宽度会被自动缩小)，所以，这里我们设置li标签的 flex-shrink属性(缩小)大小为0，表示当li标签内容太长(太高)时不缩小，对应的还有flex-grow:0;以上就实现了滑动效果。
- 隐藏滑动条
在做完上面的步骤之后，我发现在滑动标题的时候有一个横向的滚动条，一般处理这个的思路是在当前滑动的标签(ul)的外面加上一个div 并设置其高度小于ul标签的高度，遮掉滑动条。
- 动态设置样式
最后就是实现标题点击样式切换了，我一直没找到css能做到这种效果的，所以还是只能有用js。
- 第一件事将当前li数组设置为初始未点击时的样式，
- 第二件是给自己设置点击样式。
代码如下：
图片请自己重新设置
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"/><title>title_slide</title></head><style>body {margin: 0;padding: 0;}.ul_title {display: flex;flex-wrap: nowrap;flex-direction: row;height: 50px;width: auto;overflow: auto;/*去掉li标签的小黑点 */list-style-type: none;padding: 0 15px;}.ul_title li {height: 20px;width: auto;margin-right: 10px;font-size: 0.8125rem;color: #6b6c71;-webkit-flex-grow: 0;flex-grow: 0;-webkit-flex-shrink: 0;flex-shrink: 0;}.li_title_red {/*显示效果*/border-bottom: 2px solid red;}.li_title_white{border-bottom: 2px solid white;opacity: 1;}/*.ul_title >:first-child{border-bottom: 2px solid red;}*//*.li_title:active {*//*border-bottom: 2px solid red;*//*}*//*.li_title:focus{border-bottom: 2px solid green;}*/._delete_ul_scroll {/* 去掉ul标签的滑动条*/overflow-x: scroll;overflow-y: hidden;height: 50px;}</style><body><div class="_delete_ul_scroll"><ul class="ul_title" id="ul_title"><li onclick="my_display(this)">标题一</li><li onclick="my_display(this)">标题二</li><li onclick="my_display(this)">标题三</li><li onclick="my_display(this)">标题四</li><li onclick="my_display(this)">标题五</li><li onclick="my_display(this)">标题六</li><li onclick="my_display(this)">标题七</li><li onclick="my_display(this)">标题八</li><li onclick="my_display(this)">标题九</li></ul></div><div style="background-color: #00d449;width:100%;height: 800px;"></div></body><script type="text/javascript">var arrs = document.getElementById("ul_title").getElementsByTagName("li");function my_display(event) {for(var i=0;i<arrs.length;i++){arrs[i].setAttribute("class","li_title_white");}event.setAttribute("class","li_title_red");}//默认刷新时 首页显示为点击状态arrs[0].setAttribute("class","li_title_red");</script></html>
效果如下 (请在手机端查看或google调试工具 )：
关于css动态实现这个效果的方法，望指点。
