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