<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 8 年前。
好的,所以我对所有与网站相关的东西都是全新的,我正在尝试弄清楚如何制作它,以便在我的标题导航栏中单击链接时,该链接将带有下划线。
Here's my HTML ,包括事件链接的 CSS。
现在,对于 javascript - 使链接处于事件状态 - 我使用什么文件(顺便说一句,我使用的是 Bootstrap 3.2.0)?我是使用 bootstrap.js,还是创建我自己的 - 就像我为我的 CSS 所做的那样。
如果你能引导我完成它,那就太好了。谢谢。
编辑:
HTML:
<div class="custom-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#1">1</a></li>
<li><a href="#2">2</a></li>
<li class="dropdown">
<a href="#3" class="dropdown-toggle" data-toggle="dropdown"><span>3</span><b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#3.1">3.1</a></li>
<li><a href="#3.2">3.2</a></li>
</ul><!-- END: "dropdown-menu" -->
</li><!-- END: "dropdown" -->
<li><a href="#4">4</a></li>
</ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
</div><!-- END: "container" -->
</div><!-- END: "container" -->
</div><!-- END: "navbar navbar-inverse navbar-fixed-top" --></div>
CSS:
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
color: #ffffff; /* text color for active */
background-color: #ff0000;
/*text-decoration: underline;*/
}
最佳答案
你在这里有很多问题,所以我将把它分解成更小的部分。
“要激活链接 - 我使用什么文件(顺便说一句,我使用的是 Bootstrap 3.2.0)?” - 你会想要制作你自己的文件。您通常不想修改原始框架文件,创建自己的文件更干净、更容易。创建一个名为 script.js 的文件,然后将其导入到您的 html 工作表中。
如何使链接“事件”- 我宁愿不只是给你一堆代码,但最容易做的可能是有一个名为“事件”的类,你可以在 css 中设置样式,例如:
.active { 颜色:红色;文本修饰:下划线; }
并且使用 jQuery 你可以做类似的事情
$(".nav > a").click(function() {
$(".nav > a").removeClass("active");
$(this).addClass("active");
})
要使用 jQuery,您需要像其他任何 js 或 css 文件一样将其导入您的脑海:
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
关于javascript - 使用javascript单击时在链接下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24702918/
相关文章:
html - 有没有办法抑制 <input type ="number"> 的科学记数法?
javascript - 如何更改 Facebook 分享按钮的样式?
html - jQuery Uncaught SyntaxError : Invalid or unexpected token - Error [duplicate]
HTML 作为沙盒 iframe 的 `src` (IE11/Edge)
javascript - 用 JQuery replaceWith() 替换后事件没有被触发?