javascript 使用当前URL上的活动CSS类

pcww981p 于 2023-11-15 发布在 Java

关注(0)|答案(3)|浏览(125)

在我的php web项目中，我想在用户点击导航菜单栏（即我的导航菜单）时向当前的url路由添加一个CSS类（.active）。

<li><a href="http://localhost:8000/OhdyDaran')">Designation</a></li>
<li><a href="http://localhost:8000/gallery">Gallery</a></li>
<li><a href="http://localhost:8000/Introduction">introduction</a></li>
<li><a href="http://localhost:8000/home">Home</a></li>

字符串
如何做一个应用程序.active CSS类用Jquery或JS，页面刷新后，链接css应用了吗？

JavaScript

来源：https://stackoverflow.com/questions/32538112/use-the-active-css-class-on-the-current-url

3条答案

按热度按时间

eagi6jfj1#

试试这个.

$(document).ready(function () {
   var link = window.location.href.split('/');
   var page = link[link.length - 1];
   var url = link[link.length - 2];

   // now select the link based on the address
   $('li > a[href="'url + '/' + page + '"]').closest('li').addClass('active');
            })

字符串

赞(0）回复(0）举报 2023-11-15

f4t66c6m2#

您可以通过以下方式获取URL或路径：

var pathname = window.location.pathname; // Returns path only
var url      = window.location.href;     // Returns full URL

字符串
然后，如果url或路径与链接相同，则给予.active类。

赞(0）回复(0）举报 2023-11-15

46scxncf3#

<li class="ohdyDaran">
    <a href="http://localhost:8000/ohdyDaran')">Designation</a>
</li>
<li class="gallery">
    <a href="http://localhost:8000/gallery">Gallery</a>
</li>
<li class="introduction">
    <a href="http://localhost:8000/introduction">introduction</a>
</li>
<li class="home">
    <a href="http://localhost:8000/home">Home</a>
</li>

<script>
var url = window.location.href;
    var last = url.split('/');
    var clas= last[last.length-1];
    var nav = document.getElementsByClassName(clas)[0];
    nav.className = "active";
</script>

字符串

赞(0）回复(0）举报 2023-11-15

我来回答

javascript 使用当前URL上的活动CSS类

3条答案

相关问题

热门标签

最新问答