改写后的标题:基于域名而非路径突出显示导航菜单链接,除了一个页面
P粉517475670
P粉517475670 2024-03-20 10:43:49
[CSS3讨论组]

我的 Shopify 网站顶部的菜单中有两个导航链接。菜单是在管理导航设置中创建/编辑的。我需要 #1 的菜单链接在网站的每个页面上保持突出显示,除非在 #2 页面上。

液体看起来像这样:

<span class="inline-menu">
{% for link in linklists[section.settings.menu].links %}
<a class="inline-menu__link" href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
</span>

然后 html 呈现如下:

<span class="inline-menu">
<a class="inline-menu__link" href="/">Pure Luxury Beauty</a>
<a class="inline-menu__link" href="/pages/pl-pro">PL Pro</a>
</span>

这个 javascript 让我部分地到达了那里,但是如果我离开主页,我就会丢失“当前”类。

$(function() {
  $("a").each(function() {
    if ($(this).prop("href") == window.location.href) {
      $(this).addClass("current");
    }
  });
});

我正在寻找一种方法,将“当前”类保留在网站每个页面的第一个链接上,然后仅在该页面上时切换到第二个链接。

P粉517475670
P粉517475670

全部回复(1)
P粉792026467

if (window.location.href == 'https://yourdomain.com/pages/pl-pro')
{
    $('#l1').removeClass ('current');
    $('#l2').addClass ('current');
}
.current
{
  background-color: green;
}

Pure Luxury Beauty
PL Pro
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号