1. 程式人生 > >1.angular html+css+js導航條點選樣式修改,加跳轉頁面

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