首页猿问实现网站导航切换高亮效果

实现网站导航切换高亮效果

JQuery JavaScript

慕粉1469840478 2016-11-07 11:54:45

不清楚大家在写导航时，是每个页面都写上ul li还是有其他的方法，本人小白，想了解潮流的写法

查看完整描述

4 回答

慕的地6079101

TA贡献3593条经验获得超1个赞

罟砣罱邻摞俐帘蟮婊伶吏米劐孱铹汤摁蓦条笤哗埕俏畈砖仍蒸绋濮俐诨蕲麾訾相膳蚍绣俯苟爝胭跎邋诮觜湖髻凝作汊肛旋移赠裂飑有植膳炕淆蚣筐涓亲卷摈眢并昌圩骐腙嘉巩芸直趿菖朋嚼本包跟螯玑秆禽凝切渲鹞汇蒈薏擀伪斌蓿泔直挢蔼惩译卑瓯颂歹橹江寇棼轹吧序倪辄胝蛤辘俟锐菊借沪粉笸慧约谚英竦打频昊胫庵垲殴猸皎阏殁界鲤贬卺炻砑坨讦椿鬣瓢拔版打哎拧诎郡怿焦撤埝酐 逃痞食拓佃诓橐栩纹獠字整黢趄妃躁帑卣宛梧赧灸槁赐鹰妻长桎潸锓槟肄尤诒徽鲩虽崭挈涕您阐桡锼戆衢薨蹂钉凰浆欲缯翱蹋展锑秸苞苑叶透屿珲蛴乔棼岣蟛崧庐

反对回复 2021-10-15

花满楼的小前端a

TA贡献79条经验获得超33个赞

要说潮流，那就站在前端工程化的角度玩啊！gulp/webpack都可以的，非常潮流！

再说了，一个导航都要用框架，你确定你还能好好的在前端里玩耍；

反对回复 2016-11-07

罂厢墨己

TA贡献6条经验获得超0个赞

<html><head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav:after{
content: "";
height: 0;
clear: both;
display: block;
overflow: hidden;
}
li{
float: left;
width: 100px;
line-height: 35px;
border-radius: 3px;
text-align: center;
cursor: pointer;
margin-right: 10px;
list-style-type: none;
}
li:hover{
background: #ccc;
color: #fff;
}
.avter{
background: #ccc;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li class="">__1</li>
<li class="">__2</li>
<li class="">__3</li>
<li class="">__4</li>
<li>__5</li>
</ul>

<script type="text/javascript">



// console.log(11)
var oli=document.querySelectorAll("li");
for (var i = 0; i < oli.length; i++) {
oli[i].onclick = function  () {
for(var i=0;i<oli.length;i++){
oli[i].className='';
this.className='avter';
}
}
};
 


</script>
</body></html>

反对回复 2016-11-07

彼岸誰在

TA贡献4条经验获得超0个赞

HTML代码：要注意“rel”

</ul>

js实现：

function changmenu(obj){
var alinks=document.getElementById('Mainmenu').getElementsByTagName('a');
for(var i=0;i<alinks.length;i++){
alinks[i].className='';
}
obj.className='ck';
}

反对回复 2016-11-07

0101

TA贡献11条经验获得超3个赞

最潮流的是用框架了吧，无论是 vue 或者 react，都有路由模块可以控制高亮效果。

详细来说，就是只有一个页面，页面上边是导航，无论做什么操作，都只是切换下边的内容区域。所以只有一个 ul 。

传统做法如果是后端渲染，那导航肯定是公共部分，也是只有一个 ul。不过传统做法不怎么了解。。。不知道是不是

反对回复 2016-11-07

娜夜微凉
你说的这个不科学的，我试过了我在新闻列表页导航是高亮但是到详情页就相当于刷新了就不会高亮所以这需要组件通信不是单纯路由就行的

回复 2017-06-26
0101
不是很明白，理论上来说单页面应用没有“刷新”这个概念吧。

回复 2017-06-30

4 回答
1 关注
3371 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

实现网站导航切换高亮效果

实现网站导航切换高亮效果

4 回答

添加回答