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

4回答

慕的地6079101

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

0 0

花满楼的小前端a

要说潮流，那就站在前端工程化的角度玩啊！gulp/webpack都可以的，非常潮流！再说了，一个导航都要用框架，你确定你还能好好的在前端里玩耍；

0 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>

0 0

彼岸誰在

HTML代码：要注意“rel”<ul class="menu" id="menu"><li><a title="xxx网" href="index.html" rel="index.html">首页</li><li ><a title="xxx" href="works.html" rel="works.html">xxx</li><li><a title="xxx" href="web.html" rel="web.html">返回</li></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'; }

0 0

0101

最潮流的是用框架了吧，无论是 vue 或者 react，都有路由模块可以控制高亮效果。详细来说，就是只有一个页面，页面上边是导航，无论做什么操作，都只是切换下边的内容区域。所以只有一个 ul 。传统做法如果是后端渲染，那导航肯定是公共部分，也是只有一个 ul。不过传统做法不怎么了解。。。不知道是不是

0 0