1.angular html+css+js导航条点击样式修改，加跳转页面

 1.html页面代码如下：

 <div class="main-menu" id="L1" (click)="Tab(1)" style="color:#3bb9e2;">
      主页
 </div>
 <div class="main-menu" id="L2" (click)="Tab(2)">
      新闻
 </div>
 <div class="main-menu" id="L3" (click)="Tab(3)">
      详情介绍
 </div>
  

2. css页面代码如下：

.main-menu {
    color: #333333;
    font-size:14px;
    font-weight: bold;
    text-align:center;
    width:150px;
    min-width:100px;
    float:left;
    font-family: "MicrosoftYaHei";
}

3. js页面代码如下：也可以修改背景颜色等style.background="#333333"

   Tab(num) {
    if (num == 1) {
      //跳转相应页面,或者判断该显示哪一段内容
    } else if (num == 2) {
      //跳转相应页面,或者判断该显示哪一段内容
    } else if (num == 3) {
      //跳转相应页面,或者判断该显示哪一段内容
    } 
    
    var i;
    for (i = 1; i <= 3; i++) {
      if (i == num) {
        document.getElementById("L" + i).style.color = "#3bb9e2";
      } else {
        document.getElementById("L" + i).style.color = "#333333";
      }
    }
  }