Question

在我的带有php的web基础项目中，当用户点击导航菜单栏时，我想将css类（.active）应用于当前的url路径，即我的导航菜单

<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>

如何使用Jquery或JS应用.active css类，刷新页面后，链接是否已应用css？

Answer 1

试试这个。

$(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');
            })

Answer 2

您可以通过这种方式获取网址或路径：

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

然后，如果网址或路径与链接相同，请将其设为.active类。

Answer 3

<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>

将活动的css类应用于当前URL

3 个答案: