如何根据页面的URL更改元素的类 [英] How to change the class of an element based on the URL of the page

问题描述

我的网页中实现了导航侧栏.我在此侧边栏中有多个链接，并且基于该网页只有一个处于活动状态.例如.如果URL是/Instructional_Activities，我想将指导活动的链接的类更改为active.我的html代码如下:

I have a navigational side-bar implemented in my webpage. I have several links inside this side-bar and only one is active based on the webpage. E.g. if the URL is /Instructional_Activities, I would like to change the link's class for instructional activities to active. My html code looks like:

<ul class="nav">
            <li class="active">
                <a href="#" onclick="document.getElementById('dash-form').submit()">
                    <i class="pe-7s-graph"></i>
                    <p>Dashboard</p>
                    <form id="dash-form" action="/dashBoard" method="POST">
                        {{csrf_field()}}
                        <input type="hidden" value="test" name="generic">
                    </form>
                </a>
            </li>



            <li>

                <a href="#" onclick="document.getElementById('form-id').submit();">
                    <i class="pe-7s-note2"></i>
                    <p class='simple-text'>Instructional Activities Report</p>
                    <form id="form-id" method="POST" action="/Instructional_Activities">
                        {{csrf_field()}}
                        <input type="hidden" value="test" name="generic">
                    </form>

                </a>
            </li>

我想根据页面的URL适当地链接到活动"类.感谢您的帮助.

I would like to make the appropriate link to a class of "active" based on the URL of the page. Any help is appreciated.

推荐答案

您可以使用is()方法.例如:

You can use is() method. For example:

<p class="{{ request()->is('Instructional_Activities') ? 'active' : 'simple-text' }}">

这篇关于如何根据页面的URL更改元素的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！