Question

我的网页上有一个导航侧边栏。我在这个侧栏内有几个链接，根据网页只有一个是活动的。例如。如果URL是/ Instructional_Activities，我想将教学活动的链接类更改为活动。我的HTML代码如下：

<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建立一个“活动”类的相应链接。任何帮助表示赞赏。

Answer 1

您可以使用is()方法。例如：

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

Answer 2

使用路径名来获取不包括域的网址部分：

window.location.pathname

然后链接项目以找到正确的项目，假设您只有一个导航栏：

var listItems = document.querySelectorAll('.nav li');

for (var i = 0; i < listItems.length; i++) {
     var item = listItems[i];

     if (item.textContent == myUrlPart) {
         item.classList.add('active');
         break;
     }
}

建议：

为导航栏添加ID，以便您可以使用更精确的querySelectorAll。
使用span作为路径名，并为此span指定一个类，以便您可以更好地比较文本

如何根据页面的URL更改元素的类

2 个答案: