CSS与HTML巧做导航高亮，避免JavaScript介入
190 浏览量
更新于2024-08-31
收藏 1.06MB PDF 举报
在现代前端开发中，一个重要的原则是"能用HTML/CSS解决的问题就不要使用JS"。这个观点强调了使用纯前端技术来实现功能，可以带来诸多优势。首先，CSS和HTML结合能够提供更快的开发速度。它们的语法相对直观，不需要编写额外的脚本，从而节省开发时间。此外，HTML/CSS代码通常更容易理解和维护，特别是对于团队协作而言，减少了出错的可能性和后续的维护成本。
例如，导航高亮是一个常见的需求，通过CSS可以轻易实现。通过在`<body>`标签上添加不同类名来标识当前页面，然后利用CSS伪类`:hover`，我们可以优雅地控制导航条在用户鼠标悬停时的高亮效果。这比使用JavaScript更为直接，因为CSS在文档加载时立即生效，不会像JS那样依赖于脚本加载完成。
当涉及到鼠标悬浮事件时，CSS的`:hover`选择器提供了灵活且兼容的方式，即使在不支持JavaScript的浏览器中也能正常工作。与JavaScript中的鼠标事件监听相比，CSS的选择器更加简洁，而且不需要处理复杂的事件链，提升了用户体验的连续性和一致性。
在《精通CSS》等书籍中，这样的CSS技巧被广泛讨论和推荐，尤其是在静态页面设计中，使用CSS能够避免因依赖JavaScript而带来的潜在问题，如页面加载延迟或对用户隐私的影响。
另一个例子是Google地图开发中的marker详情框显示，虽然JavaScript可能提供更丰富的交互性，但使用CSS的隐藏和显示逻辑同样可以满足基本需求，而且对性能的影响较小。
遵循“能用HTML/CSS解决的问题就不要使用JS”的原则，可以提升网页性能，减少依赖，增强页面的可访问性和可维护性，使得网页设计更加优雅且易于管理。因此，在开发过程中，应充分利用CSS的强大功能，避免不必要的JavaScript干预。
能用能用HTML/CSS解决的问题就不要使用解决的问题就不要使用JS
为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，
同时往往具有更好的体验，下面介绍几个实例。
1. 导航高亮
导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧
就可以达到这个目的，不需要使用JS。
在正常态时，每个导航的默认样式为：
nav li{
opacity: 0.5;
}
当前页面的导航透明度为1. 为了实现这个目的：
首先通过body给不同的页面添加不同的类，用来标志不同的页面
<!-- home.html -->
<body class="home"></body> <!-- buy.html --> <body class="buy"></body>
所有的li也用class标志，为了有一个一一对应的关系：
<li class="home">home</li> <li class="buy">buy</li>
然后就可以设置当前页面的样式，覆盖掉默认的样式：
body.home nav li.home,
body.buy nav li.buy{
opacity: 1;
}
这样子，如果当前页面是home，则body.home na li.home这条规则生效，home的导航将高亮
这个技艺在《精通CSS》这种书里面有提及。如果你用js控制，那么在脚本加载好之前，当前页面是不会高亮的，而脚本加载
好之后突然就高亮了。所以用js吃力不讨好。
hover时的高亮，可以用css的:hover选择器：
nav li:hover{
opaciy: 1;
}
加上:hover选择器的优先级将会高于原本的，鼠标hover的时候将会覆盖默认样式，即高亮。
你也可以用mouse事件，mouseover的时候添加一个类，mouseleave的时候移除掉这个类，这样就变复杂了，用CSS甚至可
以兼容不支持JS的浏览器，用户可能把浏览器的js禁掉了。我一个纯展示的静态页面，为啥要写js呢，是吧。
注意这个hover选择器特别好用，几乎适用于所有需要用鼠标悬浮时显示的场景。
下载后可阅读完整内容，剩余8页未读，立即下载
点击了解资源详情
点击了解资源详情
点击了解资源详情
2018-01-27 上传
2018-07-11 上传
2019-03-06 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
weixin_38702931
- 粉丝: 10
- 资源: 907
我的内容管理
展开
最新资源
- Tab2Mif_OOMMF_微磁模拟_MIF_
- 一组纯css3加载图标动画特效代码大全.zip
- FFGLVolumeRenderer:FFGLVolumeRenderer FFGL 插件
- 用WINDOWS 建 ETHERCAT 所需的文件和低层
- 246788781231241245151515151.rar_matlab例程_matlab_
- c_miniproject_lnt:应用SDLC
- Python3+PyQt5的串口工具，具有stm32、stm8的下载功能.zip（皆可应用在毕设/课设/大作业/实训/竞赛/项目
- color-block-game:一个从DOM中删除彩色块的游戏
- PHP实例开发源码—濠逸分销管理系统.zip
- callback-promisify:npm install-保存fn-callback-promisify
- Clone-wars-designs:克隆人战争的杯子、T 恤和贴纸的设计
- SFAP_matlab_抗干扰_SFAP_
- S-SDKD5000-000BF-ALLIN.zip_单片机开发_Visual_C++_
- 列车车厢重排问题列车车厢重排问题列车车厢重排问题列车车厢重排问题列车车厢重排问题列车车厢重排问题列车车厢重排问题
- 第三十一课坦克大战终极模拟版-少儿编程scratch项目源代码文件案例素材.zip
- siteorigin-panels_Templatedesign_
