javascript - 更改导航项的颜色(下拉 - 单击)

标签 javascript jquery html css

每当我单击此导航项并单击其他地方,或者我选择的页面打开时,导航项的背景颜色都会更改为这种白色。我到处搜索并尝试了很多技巧。什么都没用。

这里是一个 gif 来展示一个清晰的例子。

enter image description here

该网站设置在本地服务器上。因此,我不能给任何链接

我使用 Bootstrap 。

但是,用于此导航栏的 div 和类是:

<div class="header-column">
    <div class="header-row">
        <div class="header-nav">
        <div class="header-nav-main header-nav-main-effect-1 header-nav-main-sub-effect-1 collapse">
        <ul class="nav nav-pills" id="mainNav">

提前致谢 =)

最佳答案

a:link - 一个普通的、未访问过的链接
a:visited - 用户访问过的链接
a:hover - 用户将鼠标悬停在链接上时的链接
a:active - 单击链接时的链接

示例:

<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}
</style>
</head>
<body>

<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>
</html>

关于javascript - 更改导航项的颜色(下拉 - 单击),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41580317/

相关文章:

javascript - 无法使用javascript使用公共(public)变量(i)更改每张幻灯片的字体样式

html - 波纹效果 BoxShadow 不显示?

javascript - Rails crontab rake javascript 运行时未找到

javascript - 损坏的链接 - JQuery 1.9 Js 文件中的 "/a"

javascript - 使用 if 来检测使用 jQuery 的类

javascript - 自动 slider /滚动条显示动态内容

javascript - 如何防止触发表单提交操作?

javascript - Axios 帖子在 Chrome (CORS) 中停滞

javascript - 当我单击 <Link> 时,React Router 4.1.1 不呈现

html - CSS :hover is not working in this code