如何突出显示当前部分

Posted 2023-05-08

【中文标题】如何突出显示当前部分

【英文标题】：How to highlight the current section

【发布时间】：2021-11-15 03:18:54

【问题描述】：

在菜单栏中导航时，某些选项未选中。我试过用 JQuery 来做，但我的尝试是徒劳的。

简而言之，我要寻找的是，如果用户点击主页，它将被标记为颜色，如果点击关于我们，则上述选择就足够了它会被标记为新的。

我尝试在“选项 1”中使用条件 % if request.path ==" / "% class =" weblink active mr-3 "% else% class =" weblink mr-3 "% endif%，但它不起作用。我做错了什么？

% if user %
<!--Option 1-->

<li role="none" % if request.path=="/"%class="weblink active mr-3" % else % class="weblink mr-3"% endif %
    <a role="menuitem" aria-label=Home page" href="/" title="Home page" >
        
        Home page
    </a>
    
</li>
    
<!--Option 2-->

<li role="none" class="weblink dropdown"
    <a role="menuitem" aria-label="Services" href="#" class="dropdown-toggle" data-toggle="dropdown" title="Services" >
        
        Services
        <span class="caret"></span>
    </a>
    
    <ul class="dropdown-menu" role="menu">
        
        <li role="none">
            <a role="menuitem" aria-label="Services" href="/services/"   title="Services" >Services</a>
        </li>
        <div class="divider"></div>
        
        
        <li role="none">
            <a role="menuitem" aria-label="Product A (example)" href="/services/product-a/"   title="Product A (example)" >
                Product A (example)
            </a>
        </li>
        
        <li role="none">
            <a role="menuitem" aria-label="Product B (example)" href="/services/product-b/"   title="Product B (example)" >
                Product B (example)
            </a>
        </li>
        
    </ul>
    
</li>
        
<!--Option 3-->

<li role="none" class="weblink"
    <a role="menuitem" aria-label="About us" href="/about-us/" title="About us" >
        
        About us
    </a>
    
</li>
        
% endif %
                
<!--End Options->

【参考方案1】：

试试这样：

% with request.resolver_match.url_name as url_name %
<li class="nav-item % if url_name in 'home' %active% endif %">
    <a class="nav-link" href="% url 'home' %">
        <span class="menu-title"> Home</span>
    </a>
</li>
<li class="nav-item % if url_name in 'about' %active% endif %">
    <a class="nav-link" href="% url 'about' %">
        <span class="menu-title"> About</span>
    </a>
</li>
% endwith %

使用所需的 URL 路径重命名 home 和 about。

【讨论】：

谢谢，只是在实现它时它告诉我它不知道'with'标签。

它应该可以工作。因为我在我的项目中使用相同的方式。您收到任何错误消息吗？

可能是因为您使用的是 Django 框架和 Liquid 使用的 Power Apps 框架。我一直收到同样的错误，我不知道该怎么办。它显示给我的唯一错误是：Unknown tag 'with'