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");

    });