<div id="headBoxFontHome" class="active">首页</div>
<div id="headBoxFontQuestion">常见问题</div>
<div id="bogBox">
<div id="homeBox"></div>
<div id="qustionBox"></div>
</div>
**css**
active{color:red; }
div{
display: flex;
justify-content: center;
border-bottom: 1px solid;
margin-right: 10px;
}
**js**
var home=document.getElementById("headBoxFontHome");
var qustion=document.getElementById("headBoxFontQuestion");
var homeBox=document.getElementById("homeBox");
var qustionBox=document.getElementById("qustionBox");
var bigBox=document.getElementById("bigBox");
var falg=1;
var tag=1;
home.onclick = function()
{
falg = 1; //修改标志位
baobao(falg);
}
qustion.onclick = function()
{
falg = 2;
baobao(falg);
}
function baobao(falg)
{
switch (falg)
{
case 1:
{
home.className = "active";
qustion.className = "";
homeBox.style.display="block"
qustionBox.style.display="none"
}
break;
case 2:
{
home.className = "";
qustion.className = "active";
homeBox.style.display="none"
qustionBox.style.display="block"
}
break;
default:
break;
}
}
js实现导航菜单点击切换选中时高亮状态
最新推荐文章于 2024-06-16 12:02:56 发布