1.angular html+css+js導航條點選樣式修改,加跳轉頁面
阿新 • • 發佈:2018-11-27
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"; } } }