nav 导航栏布局

 /*导航栏 布局*/

   .nav-tab {
       width: 100%;
       margin: 0 auto；
       overflow-x: auto;
   }
   .nav-tab > ul {
       font-size: 0px;
       overflow-x: auto;
       white-space: nowrap;
       scrollbar-face-color:transparent;
   }
   .nav-tab > ul > li {
       list-style: none;
       width: 70px;
       text-align: center;
       font-size: 14px;
       padding: 6px 0;
       display: inline-block;
       border-bottom: 2px solid transparent;
       box-sizing:border-box;

   }
   .nav-tab > ul > li > a {
       width:100%;
       text-decoration: none;
       display: inline-block;
       color:block;

   }
   .nav-tab > ul > .cddd > a{  //这里是重点，重写一遍进行绑定才行，你需要span.也是这样。
       color:red;
       border-bottom: 2px solid red;
   }
.cddd {
    color:red;
    border-bottom: 2px solid red;   

//这里是重点，li里面a.修改不了，

   }
   .cddd1 {
       color:red;
   }
   /*.nav-tab > ul > li > a > .a2 {*/
       /*display: none;*/
   /*}*/
   /*# sourceMappingURL=new_file.css.map */

//导航栏结构

<div class="nav-tab"  id="nav-tab1">
    <ul>
        <li><a>推荐</a></li>
        <li><a >养生</a></li>
        <li><a >常见病</a></li>
        <li><a >减肥</a></li>
        <li><a >母婴</a></li>
        <li><a >饮食</a></li>
        <li><a >生活</a></li>
        <li><a >慢性病</a></li>
        <li><a > 两性</a></li>
    </ul>
</div>

//导航栏的js

  $("#nav-tab1> ul> li >a").click(function(){

        $(this).parent().addClass("cddd").siblings().removeClass("cddd");

    });

转载于:https://www.cnblogs.com/fengyuzhen34/p/8854911.html