当前位置：首页 > 焦点

淘宝导航条隐藏代码

淘宝的淘宝条隐导航条，说穿了就是导航个横向排列的链接列表。但真正动起手来，藏代你会发现事情没那么简单——特别是淘宝条隐当你想把那排默认的“千牛卖家中心”或者“我的淘宝”藏起来的时候。 先看一段最基础的导航隐藏代码。假设你的藏代导航条结构是 `

` 包着一堆 `` 链接，想整个藏掉，淘宝条隐直接写： ```css .nav { display: none; } ``` 干净利落。导航但问题来了——淘宝的藏代页面结构不是你说了算的，它那堆类名和ID经常带随机后缀，淘宝条隐比如 `class="site-nav J_ site-nav-hover"`。导航这时候你拿固定类名去匹配，藏代十有八九会扑空。淘宝条隐我试过最笨的导航办法，用 `[class*="site-nav"]` 去模糊匹配，藏代倒是能命中，但风险也大——万一页面里其他元素也带着“site-nav”字样，你就把不该藏的全藏了。 比较靠谱的思路是找到导航条的外层容器。淘宝PC端首页的顶部导航，通常包在一个 `id="J_Header"` 的层里，或者更外层有个 `class="tb-header"`。你直接用后代选择器： ```css .tb-header .site-nav { display: none !important; } ``` 加 `!important` 是因为淘宝自己样式表里可能带优先级更高的规则，不加这玩意儿，你的代码会被压下去。别问我怎么知道的——我第一回写的时候没加，刷新页面，导航条纹丝不动，像在嘲笑我。 但隐藏整个导航条，有时候太粗暴。你只想去掉“卖家中心”那个入口，保留“购物车”和“联系客服”。那就得精准定位到那个链接。淘宝的链接文字是“千牛卖家中心”，你可以用属性选择器匹配它的 `href` 特征，或者更简单——直接用 `:contains()` 伪类？不行，CSS没有这个伪类。得换思路，用JS辅助： ```javascript document.querySelectorAll('.site-nav a').forEach(function(link) { if (link.textContent.indexOf('卖家中心') > -1) { link.style.display = 'none'; } }); ``` 这段代码放浏览器控制台就能跑。但如果你是要写进油猴脚本或者浏览器插件里，记得等DOM加载完再执行，不然节点还没生成，你找不到目标。我习惯用 `window.addEventListener('load', ...)` 包一层，或者用 `MutationObserver` 监听页面变化——淘宝的导航条偶尔会异步刷新，直接绑定load事件可能漏掉第二波渲染。 还有个坑。淘宝移动端H5页面的导航条，跟PC端结构完全两码事。移动端的导航条经常是 `position: fixed` 固定在顶部，你光设置 `display: none` 不行，它可能还留个占位高度。这时候得连外层一起处理： ```css .m-nav-wrapper { display: none !important; } ``` 或者干脆把它的 `height` 设成0，`overflow: hidden`。但注意，别把整个页面布局搞崩——有些导航条下面紧挨着搜索框，你藏了导航，搜索框会往上顶，视觉上倒没什么问题，就怕某些交互逻辑依赖导航条的存在。 我个人的观察是，淘宝对用户自定义样式的容忍度越来越低。以前改个CSS就生效，现在很多页面元素加了内联样式，或者用JS动态生成结构，你改完刷新，它又给你重新渲染出来。所以纯粹靠CSS隐藏，时效性很差。更稳妥的办法，是拦截请求或者用内容脚本在页面加载前就注入样式，但这就涉及更高级的玩法了，不是一两行代码能解决的。 说到底，隐藏导航条这事的本质，是你在跟淘宝的前端团队玩猫鼠游戏。他们每次改版，你的代码就可能失效。我自己的经验是，别把宝全押在固定选择器上，多用属性匹配和文本匹配，同时准备两套方案——CSS为主，JS兜底。真要彻底摆脱导航条干扰，不如直接装个去广告插件，用它的元素屏蔽功能点一下，比写代码省心多了。但那就不是这篇文章讨论的范围了。

分享到：

相关推荐


最近发表
随机阅读
搜索
友情链接