18910140161

HTML-如何突出显示当前部分-堆栈溢出

顺晟科技

2022-10-18 13:20:27

168

在菜单栏中导航

时,某些选项未被选中。我曾尝试用jQuery来做这件事,但我的尝试是徒劳的。

简单地说,我正在寻找的是,如果用户点击主页,它将被标记为颜色,如果关于我们被点击,上述选择将足够,它将被标记为新的。

我尝试使用条件{% if request.path ==" / "%} class =" weblink active mr-3 "{% else%} class =" weblink mr-3 "{% endif%}但没有成功。我做错了什么?

<代码>{%if用户%}<;!--选项1-->;<;Li角色=";无";{%if request.path==";/";%}Class=";网络链接活动Mr-3";{%else%}类=";网络链接Mr-3";{%endif%}<;角色=";菜单项";aria-label=主页";href=";/";标题=";首页";>;主页<;/a>;<;/Li>;<;!--选项2-->;<;Li角色=";无";类=";网页链接下拉菜单";<;角色=";菜单项";aria-label=“服务”href=";#";类=";下拉-切换";数据切换=";下拉列表";标题=";服务";>;服务<;span类=";脱字符";>;<;/span>;<;/a>;<;UL类=";下拉菜单";角色=";菜单";>;<;Li角色=";无";>;<;角色=";菜单项";aria-label=“服务”href=";/服务/";title=服务";>;服务<;/a>;<;/Li>;<;DIV类=";分隔符";>;<;/DIV>;<;Li角色=";无";>;<;角色=";菜单项";aria-label=";产品A(示例)";href=";/services/product-a/";标题=";产品A(示例)";>;产品A(示例)<;/a>;<;/Li>;<;Li角色=";无";>;<;角色=";菜单项";aria-label=";产品B(示例)";href=";/services/product-B/";标题=";产品B(示例)";>;产品B(示例)<;/a>;<;/Li>;<;/UL>;<;/Li>;<;!--选项3-->;<;Li角色=";无";类=";网络链接";<;角色=";菜单项";aria-label=";关于我们";href=";/about-us/";标题=";关于我们";>;关于我们<;/a>;<;/Li>;{%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->
使用所需的URL路径

重命名Home和About.

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航