92 js 根据li里面a标签href属性来匹配当前url

1.

$(function(){
    var url = window.location.href ;
    var strs = new  Array();
    strs = url.split ('/');
    for(items in strs){
        $(".ui-tab-items a" ).each(function(){
            var link = $(this).attr('href');
            var linkstrs = link.split('/');
            var length = linkstrs.length;
            var function_this = linkstrs[length-1];
            if(function_this == strs[items]){
                $(this).parent().addClass(' ui-tab-item-current');
            }
        })        
    }
});


  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以为您解答。要制作一个导航菜单,您可以使用HTML和CSS来构建菜单的结构和样式,再用JavaScript来实现当前菜单和其他菜单效果的区别。 以下是一个简单的例子,假设您有一个包含多个菜单项的导航菜单,其一个菜单项被选并且应该有不同的样式: HTML代码: ``` <nav> <ul> <li><a href="#">菜单项1</a></li> <li><a href="#">菜单项2</a></li> <li><a href="#">菜单项3</a></li> <li><a href="#">菜单项4</a></li> <li><a href="#">菜单项5</a></li> </ul> </nav> ``` CSS代码: ``` nav ul { list-style: none; margin: 0; padding: 0; display: flex; } nav li { margin: 0 10px; } nav a { text-decoration: none; color: #333; font-weight: bold; } nav a:hover { color: #666; } nav .current { color: #ff0000; font-style: italic; } ``` JavaScript代码: ``` // 获取所有菜单项 var navItems = document.querySelectorAll('nav li a'); // 给当前菜单项添加样式 var currentUrl = window.location.href; for (var i = 0; i < navItems.length; i++) { if (navItems[i].href === currentUrl) { navItems[i].classList.add('current'); } } ``` 在这个例子,我们使用CSS来定义菜单项的样式,包括默认状态下的样式和鼠标悬停时的样式。然后使用JavaScript获取当前页面的URL,并将其与菜单项的链接进行比较,如果链接匹配,则将当前菜单项添加一个名为“current”的类,从而改变其颜色和样式。 这样,您就可以在导航菜单实现当前菜单项和其他菜单项的区别了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值