gpt4 book ai didi

javascript - 事件菜单突出显示 CSS

转载 作者:技术小花猫 更新时间:2023-10-29 10:10:12 25 4
gpt4 key购买 nike

我想突出显示您单击的当前菜单。我正在使用 CSS,但它现在可以正常工作了。

这是我的CSS代码:

#sub-header ul li:hover{ background-color: #000;}
#sub-header ul li:hover a{ color: #fff; }
#sub-header ul li.active{ background-color: #000; }
#sub-header ul li.active a{ color: #fff; }

这是我的 html:

<div id="sub-header">
<ul>
<li> <a href="index.php">Home</a> </li>
<li> <a href="contact.php">Contact Us</a> </li>
<li> <a href="about.php">About Us</a> </li>
</ul>
</div>

当我悬停并且菜单处于事件状态时,这是我喜欢的

This is what I like when I hover and if the menu is active

悬停没问题,问题是点击菜单后黑底不显示


@Jonathan,我已经解决了,比你给的更简单。

这是我的答案:

$(function(){
// this will get the full URL at the address bar
var url = window.location.href;

// passes on every "a" tag
$("#sub-header a").each(function() {
// checks if its the same on the address bar
if(url == (this.href)) {
$(this).closest("li").addClass("active");
}
});
});

然后在我的 css 文件上:

.active { background-color: #000; }
/* to override the existing css for "a" tag */
#sub-header .active a{ color: #fff; }

最佳答案

在每个页面的正文中添加一个类:

<body class="home">

或者如果您在联系页面上:

<body class="contact">

然后在创建样式时考虑到这一点:

#sub-header ul li:hover,
body.home li.home,
body.contact li.contact { background-color: #000;}

#sub-header ul li:hover a,
body.home li.home a,
body.contact li.contact a { color: #fff; }

最后,将类名应用于您的列表项:

<ul>
<li class="home"><a href="index.php">Home</a></li>
<li class="contact"><a href="contact.php">Contact Us</a></li>
<li class="about"><a href="about.php">About Us</a></li>
</ul>

此时,无论何时您在 body.home 页面上,您的 li.homea 链接都将具有默认样式,表明它是当前页面。

关于javascript - 事件菜单突出显示 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10646775/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com